/* ============================================================================ D1 TECH CREATIVE — showcase system Shared by /work/ (portfolio) and /websites/ (ads landing page). Self-contained: depends only on /fonts/fonts.css. ========================================================================= */ :root { /* surface */ --ink: #070910; --ink-2: #0C1019; --ink-3: #131926; --ink-4: #1B2333; --paper: #F7F8FD; /* brand */ --blue: #2562FF; --blue-b: #4C82FF; --blue-soft: #8FB2FF; --blue-ghost: rgba(37, 98, 255, .12); --glow: rgba(37, 98, 255, .40); /* accents for stat colour-coding */ --mint: #23D3A0; --amber: #FFB443; /* type */ --fg: #EEF1F8; --fg-2: #A9B2C7; --fg-3: #6C768D; --line: rgba(255, 255, 255, .085); --line-2: rgba(255, 255, 255, .16); --f-display: "Poppins", system-ui, sans-serif; --f-body: "Inter", system-ui, sans-serif; --nav-h: 72px; --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --r: 18px; --r-s: 12px; --wrap: 1240px; } /* ---------------------------------------------------------------- reset -- */ *, *::before, *::after { box-sizing: border-box; } /* clip, not hidden: the closed drawer sits at translateX(102%) and the aurora bleeds -10% on each side, and both widened the document on phones. clip stops the sideways scroll without turning into a scroll container, so the sticky filter bar still works. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; background: var(--ink); color: var(--fg); font-family: var(--f-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* height:auto is load-bearing — every img carries width/height attributes for CLS, and without this the attribute height wins over any CSS width and stretches the image. Rules that genuinely want a fixed box (.card-shot img, .drawer-hero img) set height themselves and still win on specificity. */ img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, select { font: inherit; } h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; line-height: 1.06; margin: 0; letter-spacing: -.02em; } p { margin: 0; } ::selection { background: var(--blue); color: #fff; } .wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; } @media (max-width: 640px) { .wrap { width: calc(100% - 32px); } } /* --------------------------------------------------------- keyframes ----- */ @keyframes dot-drift { from { background-position: 0 0; } to { background-position: 240px 240px; } } @keyframes halo-pulse { 0% { box-shadow: 0 0 0 0 var(--glow); } 70%, 100% { box-shadow: 0 0 0 18px rgba(37,98,255,0); } } @keyframes scan-sweep { 0% { transform: translateY(-110%); } 100% { transform: translateY(210%); } } @keyframes caret-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @keyframes spin-slow { to { transform: rotate(360deg); } } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes bar-rise { from { transform: scaleY(.05); } to { transform: scaleY(1); } } @keyframes ping-ring { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } } @keyframes sheen { 0% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(320%) skewX(-18deg); } } /* ------------------------------------------------------------ ambience --- */ .field { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(rgba(140, 172, 255, .16) 1px, transparent 1px); background-size: 40px 40px; animation: dot-drift 34s linear infinite; mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 78%); opacity: .55; } .aurora { position: fixed; inset: -20% -10% auto -10%; height: 90vh; z-index: 0; pointer-events: none; background: radial-gradient(60% 55% at 20% 20%, rgba(37, 98, 255, .28), transparent 65%), radial-gradient(45% 45% at 82% 10%, rgba(120, 80, 255, .20), transparent 65%), radial-gradient(40% 40% at 55% 45%, rgba(0, 200, 255, .12), transparent 70%); filter: blur(30px); } .spot { position: fixed; z-index: 0; pointer-events: none; width: 620px; height: 620px; border-radius: 50%; left: 0; top: 0; translate: -50% -50%; background: radial-gradient(circle, rgba(37, 98, 255, .16), transparent 62%); opacity: 0; transition: opacity .5s var(--ease); } body.has-pointer .spot { opacity: 1; } /* ------------------------------------------------------------------ nav -- */ .nav { position: fixed; inset: 0 0 auto; z-index: 90; height: var(--nav-h); display: flex; align-items: center; transition: background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s; border-bottom: 1px solid transparent; } .nav.stuck { background: rgba(7, 9, 16, .82); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border-bottom-color: var(--line); } .nav .wrap { display: flex; align-items: center; gap: 24px; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 700; letter-spacing: -.01em; } .brand-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(140deg, var(--blue), #7B5CFF); font-size: 15px; color: #fff; box-shadow: 0 6px 22px rgba(37, 98, 255, .45); } .nav-links { display: flex; gap: 4px; margin-left: auto; align-items: center; } .nav-links a { padding: 9px 14px; border-radius: 10px; font-size: 14.5px; color: var(--fg-2); transition: color .2s var(--ease), background .2s var(--ease); } .nav-links a:hover { color: #fff; background: rgba(255, 255, 255, .06); } .nav-links a.on { color: #fff; } @media (max-width: 900px) { .nav-links a:not(.btn) { display: none; } } /* ----------------------------------------------------------- buttons ----- */ .btn { --bg: var(--blue); position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 26px; border-radius: 999px; font-family: var(--f-display); font-weight: 600; font-size: 15px; letter-spacing: -.01em; background: var(--bg); color: #fff; box-shadow: 0 10px 30px -8px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .22); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease); will-change: transform; } .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .35), transparent 80%); transform: translateX(-120%) skewX(-18deg); } .btn:hover { box-shadow: 0 16px 40px -10px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .3); } .btn:hover::after { animation: sheen .85s var(--ease); } .btn.sm { padding: 10px 18px; font-size: 14px; } .btn.ghost { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line-2); backdrop-filter: blur(8px); } .btn.ghost:hover { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px var(--line-2); } /* ------------------------------------------------------------ eyebrow ---- */ .eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 11px; border-radius: 999px; background: var(--blue-ghost); box-shadow: inset 0 0 0 1px rgba(37, 98, 255, .3); font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-soft); } .eyebrow .pip { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-b); animation: halo-pulse 2.4s ease-out infinite; } .caret { display: inline-block; width: 9px; background: var(--blue-b); animation: caret-blink .9s step-end infinite; } /* --------------------------------------------------------------- hero ---- */ .hero { position: relative; z-index: 1; padding: calc(var(--nav-h) + 80px) 0 70px; } .hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; } @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 36px; } } .hero h1 { font-size: clamp(40px, 6.4vw, 82px); margin: 22px 0 20px; } .hero h1 .grad { background: linear-gradient(100deg, #fff 10%, var(--blue-soft) 48%, var(--blue-b) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero .lede { font-size: clamp(16.5px, 1.9vw, 19.5px); color: var(--fg-2); max-width: 60ch; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } /* stat rail */ .rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 54px; } @media (max-width: 860px) { .rail { grid-template-columns: repeat(2, 1fr); } } .rail-item { position: relative; overflow: hidden; padding: 20px 18px; border-radius: var(--r); background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px var(--line); } .rail-item::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--blue-b), transparent); opacity: .8; } .rail-n { font-family: var(--f-display); font-weight: 700; font-size: clamp(26px, 3.4vw, 40px); line-height: 1; letter-spacing: -.03em; } .rail-l { font-size: 12.5px; color: var(--fg-3); margin-top: 8px; letter-spacing: .04em; text-transform: uppercase; } /* hero mascot */ .mascot-stage { position: relative; display: grid; place-items: center; min-height: 340px; } .mascot-stage img { width: min(100%, 400px); animation: float-y 6s ease-in-out infinite; filter: drop-shadow(0 30px 60px rgba(37, 98, 255, .35)); } .mascot-stage .ring { position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; width: 300px; height: 300px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(140, 172, 255, .22); } .mascot-stage .ring::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(37, 98, 255, .5); animation: ping-ring 3.4s var(--ease-out) infinite; } /* ---------------------------------------------------------- section ------ */ .sec { position: relative; z-index: 1; padding: 80px 0; } .sec-head { max-width: 62ch; margin-bottom: 38px; } .sec-head h2 { font-size: clamp(30px, 4.2vw, 50px); margin: 16px 0 14px; } .sec-head p { color: var(--fg-2); font-size: 17px; } /* --------------------------------------------------------- filter bar ---- */ .filters { position: sticky; top: var(--nav-h); z-index: 40; padding: 14px 0; background: linear-gradient(180deg, var(--ink) 55%, rgba(7, 9, 16, .0)); } .filter-shell { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 12px; border-radius: var(--r); background: rgba(19, 25, 38, .78); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); box-shadow: inset 0 0 0 1px var(--line), 0 18px 44px -20px rgba(0, 0, 0, .9); } .pills { display: flex; flex-wrap: wrap; gap: 6px; } .pill { position: relative; padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--fg-2); white-space: nowrap; transition: color .2s var(--ease), background .2s var(--ease); } .pill:hover { color: #fff; background: rgba(255, 255, 255, .06); } .pill.on { color: #fff; background: var(--blue); box-shadow: 0 8px 22px -8px var(--glow); } .pill .n { font-size: 11.5px; opacity: .65; margin-left: 6px; font-variant-numeric: tabular-nums; } .f-right { display: flex; gap: 8px; margin-left: auto; align-items: center; flex-wrap: wrap; } .f-search { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line); } .f-search input { background: none; border: 0; outline: none; color: var(--fg); width: 150px; font-size: 14px; } .f-search input::placeholder { color: var(--fg-3); } .f-sel { padding: 9px 14px; border-radius: 999px; font-size: 14px; background: rgba(255, 255, 255, .05); color: var(--fg-2); border: 0; box-shadow: inset 0 0 0 1px var(--line); outline: none; cursor: pointer; } .f-sel option { background: var(--ink-3); color: var(--fg); } .f-count { font-size: 13px; color: var(--fg-3); padding-left: 4px; font-variant-numeric: tabular-nums; } /* Narrow screens: the search field's fixed 150px width plus two selects made the filter row wider than the shell, which pushed the whole document 7px past the viewport. Give the row its own line and let every control shrink. */ @media (max-width: 620px) { .filter-shell { padding: 10px; gap: 10px; } .pills { width: 100%; } .f-right { width: 100%; margin-left: 0; gap: 8px; } .f-search { flex: 1 1 100%; min-width: 0; } .f-search input { width: 100%; min-width: 0; } .f-sel { flex: 1 1 calc(50% - 4px); width: auto; min-width: 0; } .f-count { width: 100%; padding-left: 2px; } } /* --------------------------------------------------------------- grid ---- */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 26px; } @media (max-width: 1080px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .grid { grid-template-columns: 1fr; } } .card { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r); cursor: pointer; background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); box-shadow: inset 0 0 0 1px var(--line), 0 20px 40px -28px rgba(0, 0, 0, .95); transition: transform .45s var(--ease-out), box-shadow .45s var(--ease); will-change: transform; } .card:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgba(37, 98, 255, .45), 0 30px 60px -26px rgba(37, 98, 255, .5); } .card.hide { display: none; } .card:focus-visible { outline: 2px solid var(--blue-b); outline-offset: 3px; } .card-shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-4); } .card-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 1.1s var(--ease-out), filter .5s var(--ease); filter: saturate(.92) contrast(1.02); } .card:hover .card-shot img { transform: scale(1.06); filter: saturate(1.05) contrast(1.04); } .card-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(7, 9, 16, .92)); } /* scanning line on hover — growthpilot vocabulary */ .card-scan { position: absolute; inset: 0 0 auto; height: 34%; z-index: 2; opacity: 0; background: linear-gradient(180deg, transparent, rgba(76, 130, 255, .22), transparent); transition: opacity .3s var(--ease); } .card:hover .card-scan { opacity: 1; animation: scan-sweep 2.4s var(--ease) infinite; } .card-tags { position: absolute; z-index: 3; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; } .tag { padding: 5px 11px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; background: rgba(7, 9, 16, .7); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--fg-2); } .tag.flag { background: var(--blue); color: #fff; box-shadow: none; } .tag.mine { background: linear-gradient(120deg, #7B5CFF, var(--blue)); color: #fff; box-shadow: none; } .card-body { position: relative; z-index: 3; padding: 18px 20px 20px; margin-top: -58px; } .card-body h3 { font-size: 20px; letter-spacing: -.02em; } .card-tagline { color: var(--blue-soft); font-size: 13.5px; margin-top: 6px; font-weight: 500; } .card-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .chip { padding: 7px 12px; border-radius: 10px; font-size: 12.5px; color: var(--fg-2); background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px var(--line); display: flex; align-items: baseline; gap: 6px; } .chip b { font-family: var(--f-display); font-size: 14.5px; color: #fff; letter-spacing: -.02em; } .chip.lead b { color: var(--mint); } .card-foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; color: var(--fg-3); } .card-foot .go { margin-left: auto; color: var(--blue-soft); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .card:hover .card-foot .go svg { transform: translateX(3px); } .card-foot .go svg { transition: transform .3s var(--ease-out); } /* live dashboard card (no client data) */ .mockwrap { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(160deg, #0F1526, #070910); } .mockwrap::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, transparent 40%, rgba(7, 9, 16, .94)); } .mock { position: absolute; inset: 14px; border-radius: 10px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--line); padding: 10px; display: grid; grid-template-columns: 46px 1fr; gap: 10px; } .mock-side { display: flex; flex-direction: column; gap: 6px; } .mock-side i { display: block; height: 7px; border-radius: 3px; background: rgba(255, 255, 255, .12); } .mock-side i:first-child { background: var(--blue); } .mock-main { display: flex; flex-direction: column; gap: 8px; } .mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .mock-kpi { border-radius: 7px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line); padding: 7px 8px; } .mock-kpi u { display: block; height: 5px; width: 60%; border-radius: 3px; background: rgba(255, 255, 255, .16); text-decoration: none; } .mock-kpi b { display: block; margin-top: 6px; height: 9px; width: 78%; border-radius: 3px; background: linear-gradient(90deg, var(--blue-b), var(--blue)); } .mock-chart { flex: 1; border-radius: 7px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--line); padding: 9px; display: flex; align-items: flex-end; gap: 5px; } .mock-chart span { flex: 1; border-radius: 3px 3px 0 0; transform-origin: bottom; background: linear-gradient(180deg, var(--blue-b), rgba(37, 98, 255, .28)); animation: bar-rise 1.4s var(--ease-out) both; } /* ------------------------------------------------------------- drawer ---- */ .scrim { position: fixed; inset: 0; z-index: 100; background: rgba(3, 5, 10, .78); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); } .scrim.open { opacity: 1; pointer-events: auto; } .drawer { position: fixed; z-index: 101; top: 0; right: 0; height: 100dvh; width: min(620px, 100%); background: var(--ink-2); box-shadow: -30px 0 80px -30px rgba(0, 0, 0, .9); transform: translateX(102%); transition: transform .5s var(--ease-out); display: flex; flex-direction: column; border-left: 1px solid var(--line); } .drawer.open { transform: none; } .drawer-x { position: absolute; top: 16px; right: 16px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(7, 9, 16, .75); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px var(--line-2); transition: background .2s var(--ease), transform .3s var(--ease-out); } .drawer-x:hover { background: var(--blue); transform: rotate(90deg); } .drawer-scroll { overflow-y: auto; overscroll-behavior: contain; } .drawer-hero { position: relative; aspect-ratio: 16 / 10; background: var(--ink-4); } .drawer-hero img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .drawer-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, var(--ink-2)); } .drawer-body { padding: 4px 30px 40px; } @media (max-width: 560px) { .drawer-body { padding: 4px 20px 34px; } } .drawer-body h3 { font-size: clamp(26px, 5vw, 36px); margin-top: 8px; } .drawer-tagline { color: var(--blue-soft); font-size: 16px; margin-top: 10px; font-weight: 500; } .drawer-blurb { color: var(--fg-2); margin-top: 18px; font-size: 15.5px; line-height: 1.75; } .drawer-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 24px; } .dstat { padding: 16px; border-radius: var(--r-s); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line); } .dstat b { display: block; font-family: var(--f-display); font-size: 26px; letter-spacing: -.03em; } .dstat span { display: block; font-size: 12.5px; color: var(--fg-3); margin-top: 4px; } .dstat .src { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; margin-top: 8px; color: var(--fg-3); opacity: .8; } .dstat.documented b { color: var(--mint); } .dstat.measured b { color: var(--blue-soft); } .dstat.product b { color: var(--amber); } .meta-h { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); margin: 28px 0 12px; } .meta-row { display: flex; flex-wrap: wrap; gap: 7px; } .meta-row span { padding: 7px 13px; border-radius: 999px; font-size: 13px; color: var(--fg-2); background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px var(--line); } .drawer-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; } /* --------------------------------------------------------------- misc ---- */ .legend { margin-top: 30px; padding: 18px 20px; border-radius: var(--r-s); background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; color: var(--fg-3); display: flex; flex-wrap: wrap; gap: 20px; align-items: center; } .legend b { color: var(--fg-2); font-weight: 600; } .legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; } .empty { text-align: center; padding: 70px 20px; color: var(--fg-3); grid-column: 1 / -1; } .empty b { display: block; font-family: var(--f-display); font-size: 22px; color: var(--fg); margin-bottom: 8px; } /* CTA band */ .band { position: relative; z-index: 1; overflow: hidden; margin: 40px auto 0; border-radius: 28px; padding: 60px 44px; background: linear-gradient(130deg, #12224E, #0A1029 60%, #150E33); box-shadow: inset 0 0 0 1px rgba(37, 98, 255, .3); } .band::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(140, 172, 255, .2) 1px, transparent 1px); background-size: 34px 34px; animation: dot-drift 28s linear infinite; opacity: .5; } .band-in { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 34px; align-items: center; } @media (max-width: 820px) { .band-in { grid-template-columns: 1fr; } .band { padding: 44px 26px; } } .band h2 { font-size: clamp(28px, 4.4vw, 46px); } .band p { color: var(--fg-2); margin-top: 14px; max-width: 52ch; } .band img.mascot { width: 190px; animation: float-y 5.5s ease-in-out infinite; filter: drop-shadow(0 20px 40px rgba(37, 98, 255, .45)); } /* footer */ .foot { position: relative; z-index: 1; padding: 44px 0 60px; margin-top: 60px; border-top: 1px solid var(--line); color: var(--fg-3); font-size: 14px; } .foot .wrap { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } .foot a:hover { color: var(--fg); } .foot .sp { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; } /* reveal */ .rv { opacity: 0; transform: translateY(26px); } .rv.in { opacity: 1; transform: none; transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); } /* ------------------------------------------------- reduced motion -------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } html { scroll-behavior: auto; } .rv { opacity: 1; transform: none; } .field, .aurora, .spot { animation: none; } }