/* ========================================================================== SauFox Entertainment — base styles Flat, minimal, dark. No gradients, no neon. ========================================================================== */ /* ---------- Fonts (self-hosted, SIL Open Font License) ---------- */ @font-face { font-family: "Great Vibes"; src: url("../assets/fonts/great-vibes.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Barlow Condensed"; src: url("../assets/fonts/barlow-condensed-700i.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "Inter"; src: url("../assets/fonts/inter-latin.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; } /* ---------- Tokens ---------- */ :root { --bg: #0f0f11; --surface: #18181b; --surface-2: #202024; --line: rgba(255, 255, 255, 0.08); --text: #f5f3ef; --muted: #8e8c95; --accent: #ff7a1a; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-logo: "Great Vibes", cursive; --font-action: "Barlow Condensed", "Arial Narrow", sans-serif; --radius: 10px; --header-h: 76px; --gutter: clamp(16px, 4vw, 40px); --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } /* No text selection or copying, and images can't be dragged out, long-press saved or right-click saved (js/main.js also blocks the menu and copy). */ body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } input, textarea { -webkit-user-select: text; user-select: text; } img { -webkit-user-drag: none; pointer-events: none; } a { color: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ========================================================================== Section 1 — Header ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); } .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "left brand right"; align-items: center; height: var(--header-h); padding: 0 var(--gutter); max-width: 1440px; margin: 0 auto; } /* Which header items show depends on . */ :root:not([data-auth="member"]) .profile-chip, [data-auth="member"] .cta, [data-auth="new"] .cta--login, [data-auth="returning"] .cta--signup { display: none; } /* ---------- Brand (script logotype) ---------- */ .brand { grid-area: brand; font: 400 38px/1 var(--font-logo); white-space: nowrap; text-decoration: none; padding-top: 4px; /* optical centering for the script's tall caps */ } /* Cursor blur (desktop only): a blurred copy of the logotype sits on top of the sharp one. A soft circle that follows the mouse shows the blurred copy and hides the sharp text under it. --blur-r grows from 0 on hover. */ @property --blur-r { syntax: ""; inherits: true; initial-value: 0px; } .brand__blur { display: none; } @media (hover: hover) and (pointer: fine) { .brand { --mx: 50%; --my: 50%; --blur-r: 0px; position: relative; transition: --blur-r 0.35s var(--ease-out); } .brand.is-blurring { --blur-r: 42px; } .brand__text { -webkit-mask-image: radial-gradient(circle var(--blur-r) at var(--mx) var(--my), transparent 35%, #000 100%); mask-image: radial-gradient(circle var(--blur-r) at var(--mx) var(--my), transparent 35%, #000 100%); } .brand__blur { display: block; position: absolute; inset: 0; padding: inherit; filter: blur(2px); pointer-events: none; -webkit-mask-image: radial-gradient(circle var(--blur-r) at var(--mx) var(--my), #000 35%, transparent 100%); mask-image: radial-gradient(circle var(--blur-r) at var(--mx) var(--my), #000 35%, transparent 100%); } } /* ---------- Call to action: Login / Wanna create an account? ---------- Bare text, no box. At rest the letters cycle orange -> white one after another in an endless wave. On hover the resting text leaves letter by letter, the hover text ("Sign Up Now" / "Welcome Back") rises in the same way, and once it has landed the text glows softly. Leaving reverses it. */ .cta { grid-area: right; justify-self: end; display: inline-grid; justify-items: end; align-items: center; height: 44px; padding: 0 4px; font: italic 700 21px/1 var(--font-action); letter-spacing: 0.02em; white-space: nowrap; text-decoration: none; color: var(--accent); transition: text-shadow 0.4s ease; } /* Both lines share one grid cell and swap in place. */ .cta__line { grid-area: 1 / 1; } .cta__char { display: inline-block; white-space: pre; transition: transform 0.5s var(--ease-out), opacity 0.4s ease, filter 0.5s ease; } /* Resting line: wave, and returns (after the hover line has left) on unhover. */ .cta__line--rest .cta__char { color: var(--accent); animation: letter-wave 2.6s ease-in-out infinite; transition-delay: calc(180ms + var(--i) * 22ms); } @keyframes letter-wave { 0%, 55%, 100% { color: var(--accent); } 25% { color: #fff; } } /* Hover line: waits below, hidden. */ .cta__line--hover .cta__char { color: #fff; opacity: 0; transform: translateY(70%); filter: blur(4px); transition-delay: calc(var(--i) * 14ms); } .cta:hover .cta__line--rest .cta__char, .cta:focus-visible .cta__line--rest .cta__char { opacity: 0; transform: translateY(-70%); filter: blur(4px); transition-delay: calc(var(--i) * 22ms); } .cta:hover .cta__line--hover .cta__char, .cta:focus-visible .cta__line--hover .cta__char { opacity: 1; transform: none; filter: none; transition-delay: calc(220ms + var(--i) * 32ms); } /* The glow arrives once the new text has landed. */ .cta:hover, .cta:focus-visible { text-shadow: 0 0 10px rgba(255, 190, 140, 0.7), 0 0 24px rgba(255, 122, 26, 0.45); transition-delay: 0.55s; } .cta:focus-visible { outline: none; } /* ---------- Profile button (signed-in users only) ---------- A pinched rectangle: the short sides are straight, the long top and bottom sides curve inward toward each other. At rest the avatar shows blurred. On hover (desktop) or first tap (touch) it comes into focus, "Profile" appears over it, and meanwhile the curved sides straighten. Both shapes use the same path commands so clip-path can morph between them. */ .profile-chip { --shape-curved: path("M0 0 Q52 12 104 0 L104 48 Q52 36 0 48 Z"); --shape-flat: path("M0 0 Q52 0 104 0 L104 48 Q52 48 0 48 Z"); grid-area: left; justify-self: start; display: grid; width: 104px; height: 48px; background: var(--surface-2); clip-path: var(--shape-curved); text-decoration: none; transition: clip-path 0.55s var(--ease-out); } .profile-chip > * { grid-area: 1 / 1; } .profile-chip__avatar { overflow: hidden; } .profile-chip__avatar img { width: 100%; height: 100%; object-fit: cover; filter: blur(5px); transform: scale(1.12); transition: filter 0.4s ease, transform 0.5s var(--ease-out); } /* Darkens the photo a touch so the label reads on any picture. */ .profile-chip__avatar::after { content: ""; position: absolute; inset: 0; background: rgba(10, 10, 12, 0.38); opacity: 0; transition: opacity 0.3s ease; } .profile-chip__avatar { position: relative; } .profile-chip__label { place-self: center; position: relative; font-weight: 600; font-size: 15px; letter-spacing: 0.02em; color: #fff; opacity: 0; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.3s var(--ease-out); } .profile-chip.is-open, .profile-chip:focus-visible { clip-path: var(--shape-flat); } .profile-chip.is-open img, .profile-chip:focus-visible img { filter: blur(0); transform: none; transition: filter 0.55s ease 0.05s, transform 0.7s var(--ease-out) 0.05s; } .profile-chip.is-open .profile-chip__avatar::after, .profile-chip:focus-visible .profile-chip__avatar::after { opacity: 1; transition-delay: 0.3s; } .profile-chip.is-open .profile-chip__label, .profile-chip:focus-visible .profile-chip__label { opacity: 1; transform: none; transition: opacity 0.35s ease 0.35s, transform 0.45s var(--ease-out) 0.35s; } @media (hover: hover) { .profile-chip:hover { clip-path: var(--shape-flat); } .profile-chip:hover img { filter: blur(0); transform: none; transition: filter 0.55s ease 0.05s, transform 0.7s var(--ease-out) 0.05s; } .profile-chip:hover .profile-chip__avatar::after { opacity: 1; transition-delay: 0.3s; } .profile-chip:hover .profile-chip__label { opacity: 1; transform: none; transition: opacity 0.35s ease 0.35s, transform 0.45s var(--ease-out) 0.35s; } } /* ---------- Header: small screens ---------- */ @media (max-width: 600px) { :root { --header-h: 64px; } .brand { font-size: 30px; } .cta { height: 40px; font-size: 18px; } .profile-chip { --shape-curved: path("M0 0 Q42 10 84 0 L84 42 Q42 32 0 42 Z"); --shape-flat: path("M0 0 Q42 0 84 0 L84 42 Q42 42 0 42 Z"); width: 84px; height: 42px; } /* Signed out there is no profile chip: brand left, button right. */ :root:not([data-auth="member"]) .site-header__inner { grid-template-columns: auto 1fr; grid-template-areas: "brand right"; } } @media (max-width: 480px) { /* The side buttons need the room: the logotype shortens to "SauFox". */ .brand__sub { display: none; } } @media (max-width: 420px) { .brand { font-size: 26px; } .cta { font-size: 16px; } } main { --hero-h: clamp(380px, 52vw, 720px); } @media (max-width: 700px) { main { --hero-h: clamp(320px, 100vw, 460px); } } /* ========================================================================== Section 2 — Hero: collage of random artwork from the studio's releases Full width with no box around it. js/main.js builds --n panels; each is clipped to a parallelogram (top corners at --i and --i + 1 panel widths, bottom corners shifted left by --slant). The whole collage is masked so its bottom edge runs flat on the left, steps down in a smooth S-curve in the middle, then runs flat again, lower, on the right. ========================================================================== */ .hero { z-index: 2; /* the work cards slide in underneath */ --slant: 9%; --gap: 5px; --w: calc((100% + var(--slant)) / var(--n, 7)); position: relative; height: var(--hero-h); margin-top: var(--gap); overflow: hidden; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 520' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V520H1200C900 520 780 370 460 370H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 520' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V520H1200C900 520 780 370 460 370H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; } /* The section itself ignores the pointer; only the panels (clipped to their visible shape by js/main.js) respond, so the cards under the curve stay clickable and draggable. */ .hero { pointer-events: none; } .hero__panel { pointer-events: auto; --x0: calc(var(--i) * var(--w)); --x1: calc((var(--i) + 1) * var(--w)); position: absolute; inset: 0; clip-path: polygon( calc(var(--x0) + var(--gap)) 0, calc(var(--x1) - var(--gap)) 0, calc(var(--x1) - var(--slant) - var(--gap)) 100%, calc(var(--x0) - var(--slant) + var(--gap)) 100% ); animation: hero-in 0.9s var(--ease-out) both; animation-delay: calc(var(--i) * 70ms); } /* Outer panels run past the page edges so no sliver of background shows. */ .hero__panel:first-child { --x0: -30%; } .hero__panel:last-child { --x1: 130%; } @keyframes hero-in { from { opacity: 0; transform: translateY(-24px); } } /* Artwork box sits under the strip: from the bottom-left corner to the top-right corner, so "cover" frames each image to its own strip. */ .hero__art { position: absolute; top: 0; bottom: 0; left: calc(var(--i) * var(--w) - var(--slant)); width: calc(var(--w) + var(--slant)); background: center / cover no-repeat; transform: scale(1.02); transition: transform 1.2s var(--ease-out), filter 0.6s ease, opacity 1.4s ease; } /* A newly swapped-in image fades in over the old one. */ .hero__art.is-entering { opacity: 0; } @media (hover: hover) { .hero:hover .hero__panel:not(:hover) .hero__art { filter: brightness(0.55) saturate(0.8); } .hero__panel:hover .hero__art { transform: scale(1.08); } } @media (max-width: 700px) { .hero { --slant: 12%; --gap: 3px; } } /* ========================================================================== Section 3 — Studio slogan A short, quiet line. On wide screens it sits in the left corner right under the hero's flat left edge, which ends at 370/520 (~71%) of the hero height, so it moves up by the remaining ~29% less a small gap. ========================================================================== */ .slogan { max-width: 1440px; position: relative; z-index: 3; margin: calc(var(--hero-h) * -0.2885 + 22px) auto 0; padding: 0 var(--gutter); } .slogan__quote { display: grid; gap: 8px; max-width: 40%; margin: 0; animation: fade-in 1s ease 0.8s both; } .slogan__quote p { margin: 0; font: 500 clamp(20px, 1.8vw, 26px)/1.35 var(--font-body); letter-spacing: -0.01em; text-wrap: balance; } .slogan__quote cite { font-style: normal; font-size: 14px; color: var(--muted); } @keyframes fade-in { from { opacity: 0; } } @media (max-width: 900px) { .slogan { margin-top: 28px; } .slogan__quote { max-width: 34rem; } } /* ========================================================================== Section 4 — Work cards A sliding row of cards tucked right under the slogan. Where the hero comes further down (on the right), the cards slide underneath it: js/main.js masks the row with the hero's curve so the cards fade out as they reach it. Moved by dragging (mouse) or swiping (touch); currency buttons below. Each card: image slider, price strip, separate status box. ========================================================================== */ .works { position: relative; z-index: 1; max-width: 1440px; margin: 28px auto 0; padding: 0 var(--gutter) 96px; } .works__track { --per-view: 4; --gap: clamp(16px, 2vw, 28px); display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view)); gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; cursor: grab; -webkit-mask: var(--curve-mask, none) 0 0 / 100% 100% no-repeat; mask: var(--curve-mask, none) 0 0 / 100% 100% no-repeat; } .works__track::-webkit-scrollbar { display: none; } .works__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; } /* ---------- Controls row ---------- */ .works__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 20px; } .works__group { display: flex; align-items: center; gap: 10px; } .works__label { font-size: 13px; color: var(--muted); } .segmented { display: inline-flex; padding: 3px; border-radius: var(--radius); background: var(--surface); } .segmented button { height: 32px; padding: 0 12px; border: 0; border-radius: calc(var(--radius) - 3px); background: transparent; color: var(--muted); font: 500 13px/1 var(--font-body); cursor: pointer; transition: background-color 0.25s, color 0.25s; } .segmented button:hover { color: var(--text); } .segmented button[aria-pressed="true"] { background: var(--surface-2); color: var(--accent); } /* ---------- Card ---------- */ .card { display: grid; align-content: start; gap: 10px; scroll-snap-align: start; } .card[hidden] { display: none; } .card__media { position: relative; aspect-ratio: 3 / 4; max-width: 100%; border-radius: var(--radius); overflow: hidden; background: var(--surface); } .card__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 0.9s ease, transform 1.4s var(--ease-out); pointer-events: none; -webkit-user-drag: none; } .card__slide.is-active { opacity: 1; transform: none; } .card__caption { position: absolute; inset: auto 0 0; display: grid; gap: 2px; padding: 48px 16px 16px; background: linear-gradient(to top, rgba(8, 8, 10, 0.78), transparent); } .card__title { margin: 0; font: 600 18px/1.2 var(--font-body); } .card__kind { font-size: 13px; color: rgba(255, 255, 255, 0.7); } .card__dots { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; } .card__dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: background-color 0.3s, transform 0.3s; } .card__dot.is-active { background: #fff; transform: scale(1.25); } /* Price strip: one currency at a time, sliding up. */ .card__price { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 16px; border-radius: var(--radius); background: var(--surface); } .card__price-label { font-size: 13px; color: var(--muted); } .card__price-track { position: relative; height: 24px; flex: 1; overflow: hidden; } .card__amount { position: absolute; inset: 0; text-align: right; font: 600 17px/24px var(--font-body); font-variant-numeric: tabular-nums; transform: translateY(100%); opacity: 0; transition: transform 0.6s var(--ease-out), opacity 0.4s ease; } .card__amount.is-active { transform: none; opacity: 1; } .card__amount.is-leaving { transform: translateY(-100%); opacity: 0; } /* Status box */ .card__status { --dot: var(--muted); display: inline-flex; align-items: center; gap: 8px; justify-self: start; height: 34px; padding: 0 14px; border-radius: var(--radius); background: var(--surface); font-size: 13px; font-weight: 500; } .card__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); } .card__status--released { --dot: #3ecf8e; } .card__status--preorder { --dot: #5b8cff; } .card__status--coming { --dot: var(--accent); } .card__status--production { --dot: var(--muted); } @media (max-width: 1000px) { .works__track { --per-view: 2; } } /* Phones: cards run edge to edge, the next one peeking in. */ @media (max-width: 520px) { .works__track { grid-auto-columns: 78%; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); scroll-padding: 0 var(--gutter); } } /* ========================================================================== Section 5 — Subscriptions Two large boxes, always side by side. Premium is set apart by a lighter surface and a filled orange button, nothing louder. ========================================================================== */ .plans { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter) 120px; } .plans__title { margin: 0 0 20px; font: 500 13px/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .plans__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); } .plan { display: flex; flex-direction: column; gap: 20px; padding: clamp(24px, 3vw, 44px); border-radius: calc(var(--radius) + 4px); background: var(--surface); border: 1px solid transparent; } .plan--premium { background: var(--surface-2); } .plan__name { margin: 0; font: 400 clamp(44px, 4.4vw, 64px)/1 var(--font-logo); } .plan--premium .plan__name { color: var(--accent); } .plan__blurb { margin: -8px 0 0; color: var(--muted); } .plan__price { display: flex; align-items: baseline; gap: 8px; } /* Same sliding currency ticker as the card prices. */ .plan__amounts { position: relative; display: inline-block; height: 44px; overflow: hidden; transition: width 0.6s var(--ease-out); /* width set by js/main.js */ } .plan__amounts .card__amount { inset: 0 auto 0 0; white-space: nowrap; text-align: left; font: 600 clamp(28px, 2.6vw, 36px)/44px var(--font-body); letter-spacing: -0.02em; } .plan__per { color: var(--muted); font-size: 15px; } .plan__list { display: grid; gap: 12px; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--line); list-style: none; } .plan__list li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.45; } .plan__check { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; color: var(--accent); } .plan__button { display: inline-flex; align-items: center; justify-content: center; height: 50px; margin-top: auto; border-radius: var(--radius); background: var(--bg); color: var(--text); font: italic 700 20px/1 var(--font-action); letter-spacing: 0.02em; text-decoration: none; transition: background-color 0.3s, color 0.3s, text-shadow 0.4s; } .plan__button:hover { color: #fff; text-shadow: 0 0 12px rgba(255, 190, 140, 0.7); } .plan--premium .plan__button { background: var(--accent); color: #1a0d04; } .plan--premium .plan__button:hover { background: #ff8c3a; text-shadow: none; } /* Always side by side; on small screens everything inside scales down. */ /* Both plans: on hover a soft light follows the pointer across the box, its edge catches the same light, and the box lifts a little. Basic's light is white, Premium's orange. */ .plan { --mx: 50%; --my: 0%; --light: 255, 255, 255; position: relative; isolation: isolate; transition: transform 0.5s var(--ease-out), border-color 0.3s ease; } .plan--premium { --light: 255, 122, 26; } .plan::before, .plan::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity 0.45s ease; } .plan::before { z-index: -1; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(var(--light), 0.12), transparent 65%); } .plan::after { inset: -1px; padding: 1px; background: radial-gradient(320px circle at var(--mx) var(--my), rgba(var(--light), 0.85), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } @media (hover: hover) { .plan:hover { transform: translateY(-4px); border-color: transparent; } .plan:hover::before, .plan:hover::after { opacity: 1; } } @media (max-width: 760px) { .plans__grid { gap: 10px; } .plan { gap: 14px; padding: 18px 14px; } .plan__name { font-size: 36px; } .plan__blurb, .plan__list li { font-size: 13px; } .plan__price { flex-wrap: wrap; gap: 0 6px; } .plan__amounts { height: 30px; } .plan__amounts .card__amount { font-size: 20px; line-height: 30px; } .plan__per { font-size: 13px; } .plan__list { gap: 10px; padding-top: 14px; } .plan__list li { gap: 8px; } .plan__check { flex-basis: 15px; width: 15px; height: 15px; } .plan__button { height: 44px; font-size: 17px; } } /* ========================================================================== Login page (login.html) Background: slanted strips of artwork across the whole screen, dimmed. Centre: one card. Left half has the studio logo, Login / Sign Up tabs whose forms slide past each other, and Google / Apple buttons. Right half has three curved layers of artwork. ========================================================================== */ .login-page { min-height: 100vh; } /* ---------- Background strips (built by js/main.js) ---------- */ .login-bg { --n: 6; --slant: 12%; --gap: 6px; --w: calc((100% + var(--slant)) / var(--n)); position: fixed; inset: 0; overflow: hidden; } .login-bg::after { content: ""; position: absolute; inset: 0; background: rgba(10, 10, 12, 0.66); } .login-bg__strip { --x0: calc(var(--i) * var(--w)); --x1: calc((var(--i) + 1) * var(--w)); position: absolute; inset: 0; clip-path: polygon( calc(var(--x0) + var(--gap)) 0, calc(var(--x1) - var(--gap)) 0, calc(var(--x1) - var(--slant) - var(--gap)) 100%, calc(var(--x0) - var(--slant) + var(--gap)) 100% ); animation: hero-in 1s var(--ease-out) both; animation-delay: calc(var(--i) * 80ms); } .login-bg__strip:first-child { --x0: -30%; } .login-bg__strip:last-child { --x1: 130%; } .login-bg__art { position: absolute; top: 0; bottom: 0; left: calc(var(--i) * var(--w) - var(--slant)); width: calc(var(--w) + var(--slant)); background: center / cover no-repeat; animation: slow-drift 24s ease-in-out infinite alternate; } @keyframes slow-drift { from { transform: scale(1.04); } to { transform: scale(1.14); } } /* ---------- Layout ---------- */ .login { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; min-height: 100vh; padding: 32px var(--gutter); } .login__brand { font: 400 40px/1 var(--font-logo); text-decoration: none; } .login__brand span { color: var(--muted); } .auth { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); width: min(980px, 100%); border-radius: 20px; overflow: hidden; background: var(--surface); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); animation: fade-in 0.8s ease 0.2s both; } .auth__main { display: grid; align-content: start; gap: 22px; min-width: 0; padding: clamp(24px, 4vw, 48px); } /* ---------- Logo and tabs ---------- */ .auth__top { display: flex; align-items: center; gap: 16px; } .auth__logo { display: grid; place-items: center; flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; background: var(--bg); color: var(--accent); font: 400 36px/1 var(--font-logo); padding-top: 4px; } .auth__tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; flex: 1; padding: 4px; border-radius: 12px; background: var(--bg); } .auth__tab { position: relative; z-index: 1; height: 44px; border: 0; background: none; color: var(--muted); font: italic 700 20px/1 var(--font-action); letter-spacing: 0.02em; cursor: pointer; transition: color 0.35s ease; } .auth__tab[aria-selected="true"] { color: var(--text); } .auth__tab-marker { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 9px; background: var(--surface-2); transition: transform 0.55s var(--ease-out); } .auth[data-mode="signup"] .auth__tab-marker { transform: translateX(100%); } /* ---------- Sliding forms ---------- */ .auth__viewport { overflow: hidden; transition: height 0.55s var(--ease-out); /* height set by js/main.js */ } .auth__slider { display: flex; align-items: flex-start; width: 200%; transition: transform 0.6s var(--ease-out); } .auth[data-mode="signup"] .auth__slider { transform: translateX(-50%); } .auth__form { display: grid; gap: 16px; flex: 0 0 50%; min-width: 0; transition: opacity 0.45s ease; } .auth__form[inert] { opacity: 0; } .field { display: grid; gap: 6px; } .field__label { font-size: 13px; color: var(--muted); } .field__box { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 6px 0 14px; border-radius: var(--radius); background: var(--bg); border: 1px solid transparent; transition: border-color 0.25s ease; } .field__box:focus-within { border-color: var(--accent); } .field__icon { flex: 0 0 18px; width: 18px; height: 18px; color: var(--muted); } .field input { flex: 1; width: 0; /* drop the input's built-in width so it never overflows */ min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text); font: 400 15px/1 var(--font-body); outline: none; } .field input::placeholder { color: #5f5d66; } .field input:-webkit-autofill { -webkit-text-fill-color: var(--text); box-shadow: 0 0 0 100px var(--bg) inset; } .field__reveal { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; transition: color 0.2s; } .field__reveal:hover { color: var(--text); } .field__reveal svg { width: 19px; height: 19px; } .field__reveal .eye-shut, .field__reveal[aria-pressed="true"] .eye-open { display: none; } .field__reveal[aria-pressed="true"] .eye-shut { display: block; } .auth__message { margin: 0; font-size: 13px; color: #ff8a7a; } .auth__message:empty { display: none; } .auth__message.is-ok { color: #3ecf8e; } .auth__submit { height: 52px; border: 0; border-radius: var(--radius); background: var(--accent); color: #1a0d04; font: italic 700 21px/1 var(--font-action); letter-spacing: 0.02em; cursor: pointer; transition: background-color 0.25s; } .auth__submit:hover { background: #ff8c3a; } /* ---------- Or / social ---------- */ .auth__or { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 13px; } .auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: var(--line); } .auth__social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .social { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--text); font: 500 14px/1 var(--font-body); cursor: pointer; transition: border-color 0.25s; } .social:hover { border-color: rgba(255, 255, 255, 0.22); } .social svg { flex: 0 0 18px; width: 18px; height: 18px; } /* ---------- Curved art layers (right half) ---------- */ .auth__art { position: relative; min-height: 100%; overflow: hidden; background: var(--bg) center / cover no-repeat; /* image set by js/main.js */ } .auth__band { position: absolute; right: 0; bottom: 0; background: center / cover no-repeat; border-top-left-radius: 100% 100%; box-shadow: 0 0 0 6px var(--surface); transition: top 0.9s var(--ease-out), left 0.9s var(--ease-out); } .auth__band--1 { top: 0; left: 0; } .auth__band--2 { top: 34%; left: 26%; } .auth__band--3 { top: 58%; left: 54%; } /* The inner layers grow a little from the corner when switching to Sign Up. */ .auth[data-mode="signup"] .auth__band--2 { top: 26%; left: 18%; } .auth[data-mode="signup"] .auth__band--3 { top: 46%; left: 42%; } @media (max-width: 760px) { .auth { grid-template-columns: minmax(0, 1fr); } .auth__art { display: none; } .login-bg { --n: 4; --slant: 18%; --gap: 4px; } .login__brand { font-size: 32px; } } @media (max-width: 420px) { .auth__social { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== Profile page (profile.html) The avatar (the header chip's pinched shape, larger) with the name, email, membership date and plan beside it. Below: Library / Wishlist / Orders / Settings tabs. ========================================================================== */ main.profile-page { padding-bottom: 120px; } .profile-head { display: flex; align-items: center; gap: 24px; max-width: 1440px; margin: clamp(32px, 5vw, 64px) auto 0; padding: 0 var(--gutter); } .profile-head__text { display: grid; gap: 6px; min-width: 0; } .profile-head__name { margin: 0; font: 400 clamp(40px, 4vw, 56px)/1 var(--font-logo); overflow-wrap: anywhere; } .profile-head__meta { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; font-size: 14px; color: var(--muted); } .profile-head__plan { display: flex; align-items: center; gap: 12px; margin: 4px 0 0; font-size: 14px; } .profile-head__plan a { color: var(--accent); text-decoration: none; } .profile-head__plan a:hover { text-decoration: underline; } .plan-badge { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: var(--radius); background: var(--surface); font-size: 13px; font-weight: 500; } .plan-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); } /* ---------- Avatar: the header chip's pinched shape, straightening on hover ---------- */ .profile-avatar { --shape-curved: path("M0 0 Q75 14 150 0 L150 112 Q75 98 0 112 Z"); --shape-flat: path("M0 0 Q75 0 150 0 L150 112 Q75 112 0 112 Z"); flex: 0 0 150px; width: 150px; height: 112px; background: var(--surface-2); clip-path: var(--shape-curved); transition: clip-path 0.55s var(--ease-out); } .profile-avatar:hover { clip-path: var(--shape-flat); } .profile-avatar__img { width: 100%; height: 100%; object-fit: cover; } .profile-avatar--small { --shape-curved: path("M0 0 Q45 9 90 0 L90 68 Q45 59 0 68 Z"); --shape-flat: path("M0 0 Q45 0 90 0 L90 68 Q45 68 0 68 Z"); flex-basis: 90px; width: 90px; height: 68px; } /* ---------- Tabs and panels ---------- */ .profile-body { max-width: 1440px; margin: 40px auto 0; padding: 0 var(--gutter); } .profile-tabs { --tab: 0; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 560px; padding: 4px; border-radius: 12px; background: var(--surface); } .profile-tab { position: relative; z-index: 1; height: 44px; border: 0; background: none; color: var(--muted); font: italic 700 19px/1 var(--font-action); letter-spacing: 0.02em; cursor: pointer; transition: color 0.35s ease; } .profile-tab[aria-selected="true"] { color: var(--text); } .profile-tabs__marker { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(25% - 2px); border-radius: 9px; background: var(--surface-2); transform: translateX(calc(var(--tab) * 100%)); transition: transform 0.55s var(--ease-out); } .profile-panel { margin-top: 28px; animation: panel-in 0.5s var(--ease-out) both; } @keyframes panel-in { from { opacity: 0; transform: translateY(10px); } } .empty { display: grid; justify-items: center; gap: 10px; padding: clamp(40px, 6vw, 72px) 24px; border-radius: 16px; background: var(--surface); text-align: center; } .empty__title { margin: 0; font-size: 20px; font-weight: 600; } .empty__text { max-width: 44ch; margin: 0; color: var(--muted); } .empty__button { display: inline-flex; align-items: center; height: 46px; margin-top: 10px; padding: 0 24px; border-radius: var(--radius); background: var(--surface-2); font: italic 700 19px/1 var(--font-action); letter-spacing: 0.02em; text-decoration: none; transition: text-shadow 0.4s; } .empty__button:hover { text-shadow: 0 0 12px rgba(255, 190, 140, 0.7); } /* ---------- Settings ---------- */ .settings { display: grid; gap: 22px; max-width: 560px; } .settings__row { display: grid; gap: 8px; } .settings__label { font-size: 13px; color: var(--muted); } /* The page behind is --bg, so fields and toggles sit on --surface here. */ .settings .field__box, .settings .field input:-webkit-autofill { background: var(--surface); } .settings .field input:-webkit-autofill { box-shadow: 0 0 0 100px var(--surface) inset; } .settings .segmented { justify-self: start; } .settings__photo { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .settings__file { position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: var(--radius); background: var(--surface-2); font-size: 14px; font-weight: 500; cursor: pointer; } .settings__file:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; } .settings__file input { position: absolute; width: 1px; height: 1px; opacity: 0; } .settings__link { border: 0; background: none; color: var(--muted); font: 500 14px/1 var(--font-body); cursor: pointer; } .settings__link:hover { color: var(--text); } .settings__actions { display: flex; gap: 12px; } .settings__actions .auth__submit { flex: 1; } .settings__logout { height: 52px; padding: 0 22px; border: 1px solid var(--line); border-radius: var(--radius); background: none; color: #ff8a7a; font: 500 15px/1 var(--font-body); cursor: pointer; transition: border-color 0.25s; } .settings__logout:hover { border-color: rgba(255, 138, 122, 0.5); } @media (max-width: 520px) { .profile-head { align-items: flex-start; gap: 16px; } .profile-avatar:not(.profile-avatar--small) { --shape-curved: path("M0 0 Q48 10 96 0 L96 72 Q48 62 0 72 Z"); --shape-flat: path("M0 0 Q48 0 96 0 L96 72 Q48 72 0 72 Z"); flex-basis: 96px; width: 96px; height: 72px; } .profile-tab { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; } .cta__char, .hero__panel, .slogan__quote, .login-bg__strip, .login-bg__art, .auth, .profile-panel { animation: none; } }