/* ============================================================ Relax Toys — "Creative Studio" theme (light + dark) Vanilla CSS, no build. Fonts: Fredoka (display) / Nunito (body). Theme is set via [data-theme] on . ============================================================ */ :root { /* themed surfaces / text */ --bg: #f7f4ef; --bg-2: #ffffff; --ink: #131019; --ink-soft: #4a4754; --muted: #6a6770; --line: rgba(19, 16, 25, .10); --line-2: rgba(19, 16, 25, .06); --glass-bg: rgba(255, 255, 255, .66); --glass-border: rgba(255, 255, 255, .6); --glass-hi: rgba(255, 255, 255, .7); --veil: 255, 255, 255; /* rgba(var(--veil), a) surfaces */ --swatch-border: rgba(19, 16, 25, .12); --shadow-sm: 0 1px 2px rgba(19,16,25,.06), 0 2px 8px rgba(19,16,25,.05); --shadow: 0 8px 24px -10px rgba(19,16,25,.18); --shadow-lg: 0 30px 60px -24px rgba(19,16,25,.32); /* brand / accents (constant across themes) */ --pink: #ec4899; --violet: #7c5cfc; --cyan: #16b8d4; --amber: #ff9f1c; --green: #10b981; --cta-grad: linear-gradient(120deg, #ec4899, #7c5cfc); --accent: #7c5cfc; --focus: 0 0 0 3px rgba(124,92,252,.45); --r: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; --wrap: 1180px; --font-display: 'Fredoka', system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: 'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color-scheme: light; } html[data-theme="dark"] { --bg: #0a0c11; --bg-2: #15171f; --ink: #f0f1f6; --ink-soft: #b7bac6; --muted: #878b99; --line: rgba(255, 255, 255, .12); --line-2: rgba(255, 255, 255, .07); --glass-bg: rgba(18, 20, 28, .62); --glass-border: rgba(255, 255, 255, .10); --glass-hi: rgba(255, 255, 255, .06); --veil: 18, 20, 28; --swatch-border: rgba(255, 255, 255, .22); --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.35); --shadow: 0 12px 30px -12px rgba(0,0,0,.6); --shadow-lg: 0 36px 70px -24px rgba(0,0,0,.7); --focus: 0 0 0 3px rgba(124,92,252,.6); color-scheme: dark; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); background: var(--bg); color: var(--ink); line-height: 1.65; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; transition: background-color .4s ease, color .4s ease; } a { color: inherit; text-decoration: none; } img, svg, canvas { display: block; max-width: 100%; } h1, h2, h3 { font-family: var(--font-display); line-height: 1.08; margin: 0 0 .4em; font-weight: 600; letter-spacing: -.01em; } :focus-visible { outline: none; box-shadow: var(--focus); border-radius: 10px; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(18px, 4vw, 32px); } /* ---------- aurora + grain background ---------- */ .bg-aurora { position: fixed; inset: -20vmax; z-index: -2; pointer-events: none; background: radial-gradient(38vmax 38vmax at 12% 8%, rgba(124,92,252,.30), transparent 60%), radial-gradient(36vmax 36vmax at 88% 4%, rgba(236,72,153,.26), transparent 60%), radial-gradient(40vmax 40vmax at 78% 82%, rgba(22,184,212,.24), transparent 62%), radial-gradient(34vmax 34vmax at 14% 92%, rgba(255,159,28,.22), transparent 60%); filter: blur(8px) saturate(1.05); animation: auroraDrift 26s ease-in-out infinite alternate; } html[data-theme="dark"] .bg-aurora { filter: blur(10px) saturate(1.2); opacity: .9; } @keyframes auroraDrift { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(2%, 1.5%, 0) scale(1.06) rotate(2deg); } 100% { transform: translate3d(-1.5%, 2%, 0) scale(1.02) rotate(-2deg); } } body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); } /* ---------- skip link ---------- */ .skip-link { position: absolute; left: -999px; top: 0; background: var(--bg-2); color: var(--ink); padding: 10px 14px; border-radius: 10px; z-index: 60; box-shadow: var(--shadow); } .skip-link:focus { left: 12px; top: 12px; } /* ---------- glass nav ---------- */ .site-header { position: sticky; top: 14px; z-index: 40; } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-inline: auto; max-width: var(--wrap); padding: 9px 12px 9px 18px; background: var(--glass-bg); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border: 1px solid var(--glass-border); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi); border-radius: var(--r-pill); } .brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; } .brand__mark { width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(from 0deg, var(--pink), var(--amber), var(--green), var(--cyan), var(--violet), var(--pink)); box-shadow: 0 4px 14px -2px rgba(124,92,252,.5); flex: none; } .site-nav { display: flex; align-items: center; gap: 4px; } .site-nav a { color: var(--ink-soft); font-weight: 600; font-size: .95rem; padding: 8px 14px; border-radius: var(--r-pill); transition: color .2s, background .2s; } .site-nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); } .site-nav .nav-cta { color: #fff; background: var(--cta-grad); box-shadow: 0 8px 20px -8px rgba(236,72,153,.6); } .site-nav .nav-cta:hover { color: #fff; filter: brightness(1.05); } .theme-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink-soft); background: transparent; border: 1px solid transparent; cursor: pointer; transition: background .2s, color .2s; } .theme-toggle:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); } .theme-toggle svg { width: 20px; height: 20px; } .theme-toggle .sun { display: none; } .theme-toggle .moon { display: block; } html[data-theme="dark"] .theme-toggle .sun { display: block; } html[data-theme="dark"] .theme-toggle .moon { display: none; } /* ---------- language switch (ไทย / EN) ---------- */ .lang-switch { display: inline-flex; align-items: center; gap: 2px; margin-inline: 2px; padding: 3px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 7%, transparent); } .lang-switch a { padding: 4px 9px; font-size: .82rem; font-weight: 700; line-height: 1; color: var(--ink-soft); border-radius: var(--r-pill); } .lang-switch a:hover { color: var(--ink); background: transparent; } .lang-switch a.is-active { color: #fff; background: var(--cta-grad); box-shadow: 0 6px 16px -8px rgba(236,72,153,.6); } /* ---------- side ad rails (live in the desktop gutters) ---------- */ .ad-rail { position: fixed; top: 50%; transform: translateY(-50%); z-index: 20; width: 120px; height: min(600px, 80vh); display: none; align-items: center; justify-content: center; border: 1px dashed var(--line); border-radius: var(--r); background: rgba(var(--veil), .4); color: var(--muted); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; } .ad-rail span { writing-mode: vertical-rl; } @media (min-width: 1440px) { .ad-rail { display: flex; } .ad-rail--left { left: calc((100vw - var(--wrap)) / 2 - 130px); } .ad-rail--right { right: calc((100vw - var(--wrap)) / 2 - 130px); } } @media (min-width: 1640px) { .ad-rail { width: 160px; } .ad-rail--left { left: calc((100vw - var(--wrap)) / 2 - 176px); } .ad-rail--right { right: calc((100vw - var(--wrap)) / 2 - 176px); } } /* Toy pages: only a LEFT rail; the studio spans full width so the canvas is as big as possible */ .page--toy .ad-rail--right { display: none; } @media (min-width: 1440px) { .page--toy .ad-rail--left { left: 16px; } .page--toy .studio { padding-left: 160px; } } @media (min-width: 1640px) { .page--toy .ad-rail--left { left: 24px; } .page--toy .studio { padding-left: 208px; } } /* ---------- in-flow banner ads (shown only when side rails are hidden, < 1440px) ---------- */ .ad-slot { display: none; align-items: center; justify-content: center; border: 1px dashed var(--line); border-radius: var(--r); color: var(--muted); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; margin: 22px auto; background: rgba(var(--veil), .4); min-height: 100px; max-width: 970px; } .ad-slot--inline { min-height: 250px; } @media (max-width: 1439.98px) { .ad-slot { display: flex; } } /* ---------- buttons ---------- */ .btn, .chip { font: inherit; font-weight: 700; color: var(--ink); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 10px 16px; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .12s ease, box-shadow .2s, border-color .2s, background .2s, color .2s; } .btn:hover, .chip:hover { border-color: rgba(124,92,252,.5); transform: translateY(-1px); box-shadow: var(--shadow); } .btn:active, .chip:active { transform: translateY(0); } .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; } .btn--primary, .btn--cta { color: #fff; background: var(--cta-grad); border-color: transparent; box-shadow: 0 12px 26px -10px rgba(236,72,153,.6); } .btn--primary:hover, .btn--cta:hover { color: #fff; filter: brightness(1.05); } .btn--ghost { background: transparent; box-shadow: none; } .chip.is-active { color: #fff; background: linear-gradient(180deg, var(--violet), #6a4cf0); border-color: transparent; } .btn--lg { padding: 14px 26px; font-size: 1.02rem; } .btn svg { width: 18px; height: 18px; display: inline; vertical-align: -3px; } /* ---------- hero ---------- */ .hero { padding: clamp(28px, 6vw, 64px) 0 24px; } .hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 5vw, 56px); align-items: center; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--violet); background: color-mix(in srgb, var(--violet) 12%, transparent); border: 1px solid color-mix(in srgb, var(--violet) 28%, transparent); padding: 6px 14px; border-radius: var(--r-pill); } .hero__title { font-size: clamp(2.5rem, 6.5vw, 4.6rem); font-weight: 600; margin: 18px 0 14px; } .hero__title .grad { background: var(--cta-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__sub { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--ink-soft); max-width: 46ch; margin: 0 0 26px; } .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .hero__meta { margin-top: 18px; color: var(--muted); font-weight: 600; font-size: .92rem; display: flex; gap: 16px; flex-wrap: wrap; } .hero__meta b { color: var(--ink); } .hero__art { position: relative; } .hero__frame { position: relative; border-radius: var(--r-xl); overflow: hidden; background: #0d0f17; box-shadow: var(--shadow-lg); aspect-ratio: 1 / 1; width: 100%; border: 1px solid var(--glass-border); } .hero__frame canvas { width: 100%; height: 100%; } .hero__badge { position: absolute; bottom: 14px; left: 14px; z-index: 2; display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: .82rem; padding: 8px 14px; border-radius: var(--r-pill); background: rgba(13,15,23,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.18); } .hero__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); } /* ---------- section heading ---------- */ .section { padding: clamp(36px, 6vw, 72px) 0; } .section__head { max-width: 60ch; margin-bottom: 30px; } .section__eyebrow { font-weight: 800; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); } .section__title { font-size: clamp(1.8rem, 3.6vw, 2.7rem); margin: 8px 0 6px; } .section__sub { color: var(--ink-soft); font-size: 1.06rem; } /* ---------- bento gallery (image cards) ---------- */ .bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 18px; } .tile { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); cursor: pointer; display: block; color: #fff; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s; } .tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(124,92,252,.4); } .tile--lg { grid-column: span 2; grid-row: span 2; } .tile--wide { grid-column: span 2; } .tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .45s cubic-bezier(.2,.8,.2,1); } .tile:hover .tile__img { transform: scale(1.06); } .tile__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(8,9,14,.86), rgba(8,9,14,.18) 46%, rgba(8,9,14,0) 72%); } .tile__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 16px 18px; } .tile__title { font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; margin: 0 0 1px; color: #fff; } .tile--lg .tile__title { font-size: 1.7rem; } .tile__tag { color: rgba(255,255,255,.82); font-size: .92rem; margin: 0; font-weight: 600; } .tile__pills { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; gap: 6px; } .pill { font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: rgba(13,15,23,.5); border: 1px solid rgba(255,255,255,.2); padding: 4px 10px; border-radius: var(--r-pill); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .pill--accent { color: #fff; background: var(--accent); border-color: transparent; } .tile__go { position: absolute; top: 14px; right: 14px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92); color: #15171f; opacity: 0; transform: translateX(-4px); transition: opacity .25s, transform .25s; } .tile:hover .tile__go { opacity: 1; transform: translateX(0); } .tile__go svg { width: 16px; height: 16px; } /* ---------- prose ---------- */ .prose { margin: 36px auto; max-width: 70ch; } .prose h1 { font-size: clamp(2rem, 4vw, 2.8rem); } .prose h2 { font-size: 1.4rem; margin-top: 1.3em; } .prose p { color: var(--ink-soft); } .prose a { color: var(--violet); text-decoration: underline; text-underline-offset: 2px; } /* ---------- toy page: "studio" layout (big unobstructed canvas + side tool panel) ---------- */ .studio { display: flex; flex-direction: column; gap: 14px; padding: 8px clamp(16px, 3vw, 30px) 0; } .studio__stage { display: grid; place-items: center; min-width: 0; } .stage { width: min(100%, 94vw, 76vh); aspect-ratio: 1; background: #0d0f17; border: 1px solid var(--glass-border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); touch-action: none; cursor: crosshair; } .studio__panel { display: flex; flex-direction: column; gap: 16px; padding: 16px 18px; border: 1px solid var(--glass-border); border-radius: var(--r-lg); background: var(--glass-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow); } .panel__head { display: flex; flex-direction: column; gap: 2px; } .panel__title { font-size: 1.4rem; margin: 0; } .panel__tag { color: var(--ink-soft); margin: 0; font-size: .94rem; } .studio__panel input[type=range] { width: 100%; } .toolbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: center; } .toolbar__group { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .toolbar__label { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 800; } .toy__howto h2 { font-size: 1.25rem; } /* Brush Lab — the draw-your-own-brush pad */ .toolbar__group--pad { flex-direction: column; align-items: stretch; gap: 7px; } .toolbar__group--pad .toolbar__label { flex: 0 0 auto; } .brushpad { width: 100%; max-width: 220px; aspect-ratio: 1; margin-inline: auto; border: 1px solid var(--line); border-radius: 12px; background: rgba(var(--veil), .5); box-shadow: var(--shadow-sm); touch-action: none; cursor: crosshair; } /* action buttons → compact icon buttons (the button text stays as the accessible name) */ .btn[data-action] { width: 40px; height: 40px; min-width: 0; padding: 0; border-radius: 11px; display: inline-grid; place-items: center; font-size: 0; flex: 0 0 auto; box-shadow: none; } .btn[data-action]::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--ic) center / 20px no-repeat; mask: var(--ic) center / 20px no-repeat; } .btn[data-action="undo"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h11a4 4 0 0 1 0 8H9'/%3E%3C/svg%3E"); } .btn[data-action="redo"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 14 5-5-5-5'/%3E%3Cpath d='M20 9H9a4 4 0 0 0 0 8h6'/%3E%3C/svg%3E"); } .btn[data-action="reset"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E"); } .btn[data-action="download"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 11 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E"); } .btn[data-action="share"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4'/%3E%3Cpath d='m8 8 4-4 4 4'/%3E%3Cpath d='M5 12v8h14v-8'/%3E%3C/svg%3E"); } .btn[data-action]:hover { background: color-mix(in srgb, var(--ink) 9%, var(--bg-2)); } .btn--primary[data-action]:hover { background: var(--cta-grad); } /* hover tooltips for icon-only controls (label set from JS via data-tip) */ [data-tip] { position: relative; } [data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 3px); padding: 4px 9px; border-radius: 7px; white-space: nowrap; font-size: .7rem; font-weight: 700; letter-spacing: normal; text-transform: none; line-height: 1.2; background: var(--ink); color: var(--bg); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .14s ease, transform .14s ease; z-index: 60; } [data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); } .site-header [data-tip]::after { bottom: auto; top: calc(100% + 8px); transform: translate(-50%, -3px); } .site-header [data-tip]:hover::after, .site-header [data-tip]:focus-visible::after { transform: translate(-50%, 0); } @media (min-width: 721px) { .studio { flex-direction: row; align-items: stretch; gap: 22px; min-height: calc(100svh - 72px); } .studio__stage { flex: 1 1 auto; } .stage { width: 100%; height: calc(100svh - 88px); aspect-ratio: auto; } .stage--square { width: min(100%, calc(100svh - 88px)); height: auto; aspect-ratio: 1; } .studio__panel { flex: 0 0 clamp(224px, 23vw, 288px); } .toolbar { flex-direction: column; align-items: stretch; gap: 11px; justify-content: flex-start; } .toolbar__group { width: 100%; align-items: center; gap: 6px 10px; } .toolbar__label { flex: 0 0 46px; } .studio__panel .palette { flex: 1 1 0; min-width: 0; } .studio__panel input[type=range] { flex: 1 1 0; min-width: 110px; } .toolbar__group--actions { gap: 7px; } } /* palette */ .palette { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--swatch-border); background: var(--c, #fff); padding: 0; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .12s; } .swatch:hover { transform: scale(1.12); } .swatch.is-active { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--violet); } .swatch--custom { background: conic-gradient(red, orange, yellow, lime, cyan, blue, magenta, red); -webkit-appearance: none; appearance: none; overflow: hidden; } .swatch--custom::-webkit-color-swatch-wrapper { padding: 0; } .swatch--custom::-webkit-color-swatch { border: none; border-radius: 50%; } input[type=range] { accent-color: var(--violet); cursor: pointer; } /* ---------- footer ---------- */ .site-footer { margin-top: 56px; border-top: 1px solid var(--line); background: rgba(var(--veil), .4); } .site-footer__inner { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; padding-block: 30px; } .site-footer__brand { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; margin: 0; display: flex; align-items: center; gap: 10px; } .site-footer__links { display: flex; gap: 22px; } .site-footer__links a { color: var(--ink-soft); font-weight: 600; } .site-footer__links a:hover { color: var(--ink); } .site-footer__copy { color: var(--muted); font-size: .88rem; margin: 0; width: 100%; } /* ---------- scroll reveal ---------- */ .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); } .reveal.is-in { opacity: 1; transform: none; } /* ---------- responsive ---------- */ @media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; } .hero__art { order: -1; max-width: 460px; margin-inline: auto; } .bento { grid-template-columns: repeat(2, 1fr); } .tile--lg, .tile--wide { grid-column: span 2; } .tile--lg { grid-row: span 2; } } @media (max-width: 560px) { .site-header { top: 8px; } .site-nav a:not(.nav-cta) { display: none; } /* keep the language switch usable on mobile even though other nav links hide */ .site-nav .lang-switch { display: inline-flex; } .site-nav .lang-switch a { display: inline-block; } .bento { grid-auto-rows: 164px; gap: 12px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .bg-aurora { animation: none; } .js .reveal { opacity: 1; transform: none; transition: none; } * { transition-duration: .01ms !important; } }