/* ======================================================================== fizesan.ro — Adelin Fizesan Design system ======================================================================== */ :root{ --ink: #05060A; --ink-2: #0A0B11; --ink-3: #101219; --line: rgba(233,226,214,.12); --line-soft: rgba(233,226,214,.07); --paper: #EFEAE1; --paper-dim: rgba(239,234,225,.62); --paper-faint:rgba(239,234,225,.38); --gold: #D8A24A; --gold-hot: #F2C476; --gold-deep: #8C6522; --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --f-body: 'Inter Tight', 'Inter', system-ui, sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; --pad: clamp(20px, 4vw, 64px); /* The flat sections all sit on this instead of raw black: a hairline column grid, a sheen along the top edge and one warm pool in the corner. Subtle on purpose — it should read as depth, not pattern. */ --dark-bg: linear-gradient(180deg, rgba(239,234,225,.028), transparent 26%), repeating-linear-gradient(90deg, rgba(233,226,214,.021) 0 1px, transparent 1px clamp(78px, 8.5vw, 128px)), radial-gradient(118% 76% at 86% 4%, rgba(216,162,74,.052), transparent 62%), radial-gradient(96% 66% at 4% 96%, rgba(70,96,170,.038), transparent 66%), var(--ink); --ease: cubic-bezier(.22,.61,.36,1); --ease-io: cubic-bezier(.65,0,.35,1); } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; /* clip, not hidden: hidden would make a scroll container and break the sticky hero. This is what stops decorative overflow (glow pools, grain, ember fields) from widening the document on a phone. */ overflow-x:clip; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } } body{ margin:0; background:var(--ink); color:var(--paper); font-family:var(--f-body); font-size:clamp(15px,1.05vw,17px); line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip; } img,video,canvas{ display:block; max-width:100%; } figure{ margin:0; } figcaption{ margin:0; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } ::selection{ background:var(--gold); color:#0A0700; } /* ---------- typographic primitives ---------- */ .display{ font-family:var(--f-display); font-weight:800; font-stretch:112%; line-height:.92; letter-spacing:-.025em; text-transform:uppercase; margin:0; } .eyebrow{ font-family:var(--f-mono); font-size:clamp(9px,.72vw,11px); font-weight:500; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); margin:0; } .eyebrow--dim{ color:var(--paper-faint); } .lede{ font-size:clamp(16px,1.35vw,20px); line-height:1.55; color:var(--paper-dim); margin:0; max-width:52ch; } .lede b{ color:var(--paper); font-weight:600; font-family:var(--f-display); font-stretch:106%; text-transform:uppercase; letter-spacing:.04em; font-size:.94em; border-bottom:1px solid var(--gold); padding-bottom:1px; } .rule{ height:1px; width:100%; background:var(--line); border:0; margin:0; } /* ---------- gold accents ---------- */ .gold{ color:var(--gold); } .gold-line{ display:block; height:1px; width:100%; background:linear-gradient(90deg, var(--gold-deep), var(--gold), transparent 78%); } /* ---------- nav ---------- */ .nav{ position:fixed; inset:0 0 auto 0; z-index:60; display:flex; align-items:center; justify-content:space-between; padding:clamp(16px,2vw,26px) var(--pad); pointer-events:none; mix-blend-mode:difference; } .nav > *{ pointer-events:auto; } .mark{ display:flex; align-items:baseline; gap:.6ch; font-family:var(--f-display); font-weight:800; font-stretch:118%; font-size:clamp(13px,1.05vw,16px); letter-spacing:.02em; text-transform:uppercase; color:#fff; } .mark small{ font-family:var(--f-mono); font-weight:400; font-size:9px; letter-spacing:.28em; opacity:.6; transform:translateY(-.15em); } .nav__links{ display:flex; align-items:center; gap:clamp(16px,2.2vw,34px); font-family:var(--f-mono); font-size:clamp(9px,.72vw,11px); letter-spacing:.24em; text-transform:uppercase; color:#fff; } .nav__links a{ position:relative; padding-bottom:3px; } .nav__links a::after{ content:''; position:absolute; left:0; bottom:0; height:1px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease); } .nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; } /* ---------- buttons ---------- */ .btn{ --bh: clamp(46px,3.6vw,56px); position:relative; display:inline-flex; align-items:center; gap:1.1ch; height:var(--bh); padding:0 clamp(20px,1.8vw,30px); font-family:var(--f-mono); font-size:clamp(10px,.75vw,11.5px); letter-spacing:.22em; text-transform:uppercase; border:1px solid var(--line); color:var(--paper); overflow:hidden; isolation:isolate; transition:color .45s var(--ease), border-color .45s var(--ease); } .btn::before{ content:''; position:absolute; inset:0; z-index:-1; background:var(--gold); transform:translateY(101%); transition:transform .55s var(--ease); } .btn:hover{ color:#0A0700; border-color:var(--gold); } .btn:hover::before{ transform:translateY(0); } .btn .arw{ transition:transform .45s var(--ease); } .btn:hover .arw{ transform:translateX(4px); } .btn--gold{ border-color:var(--gold); color:var(--gold); } .btn--gold:hover{ color:#0A0700; } .btn--ghost{ border-color:var(--line-soft); color:var(--paper-dim); } /* ---------- grain + vignette overlays ---------- */ .grain{ position:fixed; inset:-120%; z-index:70; pointer-events:none; opacity:.05; mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,"); animation:grainShift 6s steps(6) infinite; } @keyframes grainShift{ 0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-3%)} 60%{transform:translate(-2%,-4%)} 80%{transform:translate(4%,2%)} 100%{transform:translate(0,0)} } /* A fixed layer 3.4x the size of the viewport, running a blend mode and an animation, is one of the most expensive things you can put on a phone — it recomposites the whole screen every frame. Shrink it, stop it moving, and drop the blend on small screens; the texture still reads. */ @media (max-width:820px){ .grain{ inset:0; animation:none; mix-blend-mode:normal; opacity:.035; } } @media (prefers-reduced-motion:reduce){ .grain{ animation:none; } } .vignette{ position:fixed; inset:0; z-index:12; pointer-events:none; background:radial-gradient(120% 90% at 50% 45%, transparent 38%, rgba(0,0,0,.55) 100%); } @media (prefers-reduced-motion:reduce){ .grain{ animation:none; } } /* ---------- the whole page rumbles when the engine catches ---------- */ @keyframes siteRumble{ 0% { transform:translate3d(0,0,0) } 6% { transform:translate3d(-4px, 3px,0) } 14% { transform:translate3d(5px, -3px,0) } 23% { transform:translate3d(-4px, -3px,0) } 32% { transform:translate3d(4px, 3px,0) } 42% { transform:translate3d(-3px, 2px,0) } 53% { transform:translate3d(3px, -2px,0) } 64% { transform:translate3d(-2px, -1px,0) } 76% { transform:translate3d(2px, 1px,0) } 88% { transform:translate3d(-1px, 1px,0) } 100% { transform:translate3d(0,0,0) } } body.is-rumble{ animation:siteRumble .62s cubic-bezier(.36,.07,.19,.97) both; will-change:transform; } @media (prefers-reduced-motion:reduce){ body.is-rumble{ animation:none; } } /* ---------- reveal on scroll ---------- */ [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay:var(--d,0ms); } [data-reveal].is-in{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1; transform:none; transition:none; } } /* ---------- footer ---------- */ .foot{ position:relative; z-index:14; display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; padding:clamp(24px,3vw,40px) var(--pad); border-top:1px solid var(--line-soft); font-family:var(--f-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--paper-faint); background:var(--ink); } .foot a:hover{ color:var(--gold); } /* ---------- the wave goodbye ---------- */ .peek{ position:fixed; right:0; bottom:0; z-index:95; display:flex; align-items:flex-end; pointer-events:none; transform:translate3d(0, 105%, 0); transition:transform 1.05s cubic-bezier(.22,.9,.3,1); } .peek.is-in{ transform:translate3d(0,0,0); } .peek__me{ width:auto; height:clamp(190px, 30vw, 330px); display:block; filter:drop-shadow(-14px 8px 34px rgba(0,0,0,.6)); transform-origin:bottom right; } .peek.is-in .peek__me{ animation:peekLean 5.5s var(--ease-io) .9s infinite alternate; } @keyframes peekLean{ from{ transform:rotate(0deg) translateY(0); } to { transform:rotate(-1.6deg) translateY(-5px); } } .peek__bubble{ position:relative; align-self:flex-end; margin:0 -14px clamp(118px, 20vw, 214px) 0; padding:13px 18px; max-width:24ch; background:rgba(8,9,13,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--gold); color:var(--paper); font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; line-height:1.7; text-wrap:balance; box-shadow:0 14px 40px rgba(0,0,0,.55); opacity:0; transform:translateY(10px) scale(.94); transition:opacity .5s var(--ease) .55s, transform .6s var(--ease) .55s; } .peek.is-in .peek__bubble{ opacity:1; transform:none; } .peek__bubble::after{ content:''; position:absolute; right:-7px; bottom:16px; width:12px; height:12px; rotate:45deg; background:inherit; border-right:1px solid var(--gold); border-top:1px solid var(--gold); } .peek__x{ position:absolute; right:14px; top:-2px; width:26px; height:26px; display:grid; place-items:center; color:var(--paper-faint); background:rgba(8,9,13,.8); border:1px solid var(--line); opacity:0; pointer-events:none; transition:opacity .4s var(--ease) .9s, color .3s var(--ease); } .peek.is-in .peek__x{ opacity:1; pointer-events:auto; } .peek__x:hover{ color:var(--gold); } /* ---------- the clickable variant (the FAQ nudge) ---------- */ .peek--cta{ pointer-events:none; } .peek--cta .peek__bubble, .peek--cta .peek__melink, .peek--cta .peek__x{ pointer-events:auto; } .peek--cta .peek__bubble{ display:block; cursor:pointer; text-transform:none; letter-spacing:.02em; font-family:var(--f-body); font-size:13.5px; line-height:1.45; max-width:23ch; transition:border-color .3s var(--ease), color .3s var(--ease), opacity .5s var(--ease) .55s, transform .6s var(--ease) .55s; } .peek--cta .peek__bubble:hover{ color:var(--gold); } .peek__go{ display:block; margin-top:9px; padding-top:8px; border-top:1px solid var(--line); font-family:var(--f-mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); } .peek__go em{ font-style:normal; display:inline-block; transition:transform .3s var(--ease); } .peek--cta .peek__bubble:hover .peek__go em{ transform:translateX(4px); } .peek__melink{ display:block; cursor:pointer; } @media (max-width:620px){ .peek__me{ height:clamp(150px, 40vw, 200px); } .peek__bubble{ font-size:9.5px; padding:10px 13px; margin-bottom:clamp(70px, 26vw, 120px); } .peek--cta .peek__bubble{ font-size:12px; max-width:19ch; padding:11px 14px; } .peek--cta .peek__me{ height:clamp(140px, 36vw, 180px); } } @media (prefers-reduced-motion:reduce){ .peek{ display:none; } } /* ================================================== drifting glow pools == Every section keeps one slow-moving pool of light so the page is never completely static. They travel a long way over a long time — the eye should register warmth shifting, never an animation running. */ .glow-drift{ position:relative; overflow:hidden; } .glow-drift > .glow{ position:absolute; inset:-18%; z-index:0; pointer-events:none; background:radial-gradient(34% 28% at 50% 50%, rgba(216,162,74,.115), rgba(216,162,74,.03) 46%, transparent 70%); animation:glowDrift 26s ease-in-out infinite alternate; will-change:transform; } .glow-drift > .glow--ember{ background:radial-gradient(36% 30% at 50% 50%, rgba(198,72,52,.15), rgba(198,72,52,.04) 46%, transparent 72%); animation-duration:19s; animation-direction:alternate-reverse; } @keyframes glowDrift{ from{ transform:translate3d(-16%,-9%,0) scale(1); opacity:.62; } to { transform:translate3d(17%,11%,0) scale(1.26); opacity:1; } } .glow-drift.is-still > .glow{ animation-play-state:paused; } @media (prefers-reduced-motion:reduce){ .glow-drift > .glow{ animation:none; } } /* ====================================================== touch behaviour == Most of the traffic is on a phone, so anything tappable gets a real target and none of it flashes the default grey box on tap. */ a, button, summary, [role="button"]{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; /* kills the 300ms double-tap delay */ } /* Touch targets. Keyed off width as well as pointer type — a phone in desktop-request mode still reports hover, and the thumb is the same size. */ @media (hover:none), (max-width:820px){ .social__link{ padding:11px 2px; min-height:44px; } .nav__links a{ padding:12px 2px 8px; } .mark{ display:inline-block; padding:10px 2px; } .foot a{ display:inline-block; padding:9px 2px; } .peek__x{ width:44px; height:44px; right:8px; top:-10px; } }