/* ========================================================================== GirafPingvin — Liquid Glass Chameleon Design System Premium glassmorphism · Animated aurora · Sliding pill nav ========================================================================== */ /* -------------------------------------------------------------------------- 1. RESET & FOUNDATION -------------------------------------------------------------------------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* Frosted glass budget — only allow backdrop-filter on key fixed/overlay UI. Everything else uses opaque or semi-transparent backgrounds instead. This prevents Chrome compositor thrashing from too many blurred layers. */ html { scroll-behavior: smooth; font-size: 16px; } body { min-height: 100vh; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); overflow-x: hidden; padding-top: 5.5rem; /* clear the fixed nav pill */ } /* Mode transitions — only active during intentional dark/light toggle. Prevents flicker from permanent transitions on composited layers. */ html.mode-transition body { transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1), background 0.6s cubic-bezier(0.4, 0, 0.2, 1); } html.mode-transition .aurora { transition: background 0.6s cubic-bezier(0.4, 0, 0.2, 1); } html.mode-transition .aurora__orb { transition: background 1s ease; } a { color: var(--color-link); text-decoration: none; transition: color 0.25s ease; } a:hover { color: var(--color-link-hover); } img { max-width: 100%; display: block; } /* -------------------------------------------------------------------------- 2. THEME — GirafPingvin (pastel aurora, rounded, playful) -------------------------------------------------------------------------- */ [data-theme="girafpingvin"] { --color-primary: #FFB347; --color-primary-rgb: 255, 179, 71; --color-secondary: #77DD77; --color-accent: #FF6B9D; --color-bg: #FFF9F0; --color-bg-alt: #FFF3E0; --color-surface: rgba(255, 255, 255, 0.55); --color-surface-solid: #FFFFFF; --color-text: #3D2C2C; --color-text-muted: #8B7E74; --color-link: #E07B39; --color-link-hover: #C0612A; /* Liquid Glass Nav */ --glass-bg: rgba(255, 255, 255, 0.78); --glass-border: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 179, 71, 0.2) 50%, rgba(255, 255, 255, 0.4) 100%); --glass-shadow: 0 8px 32px rgba(255, 179, 71, 0.10), 0 1px 3px rgba(0, 0, 0, 0.04); --glass-blur: blur(24px) saturate(180%); --nav-text: #1A1A1A; --nav-active: #C0612A; --pill-bg: rgba(255, 179, 71, 0.15); --pill-active-bg: rgba(255, 179, 71, 0.22); --pill-glass-bg: rgba(255, 179, 71, 0.14); --pill-glass-border: rgba(255, 179, 71, 0.22); --pill-glass-glow: rgba(255, 179, 71, 0.12); --pill-glass-highlight: rgba(255, 255, 255, 0.35); /* Lang toggle */ --lang-bg: rgba(255, 255, 255, 0.10); --lang-active-bg: rgba(255, 255, 255, 0.55); --lang-active-text: #1A1A1A; /* Typography */ --font-heading: 'Nunito', 'Comic Neue', system-ui, sans-serif; --font-body: 'Nunito', system-ui, sans-serif; --font-weight-heading: 800; --font-weight-body: 400; /* Shape */ --radius-sm: 12px; --radius-md: 20px; --radius-lg: 28px; --radius-pill: 9999px; --radius-card: 24px; /* Cards */ --card-bg: rgba(255, 255, 255, 0.72); --card-border: rgba(255, 255, 255, 0.65); --card-shadow: 0 4px 24px rgba(255, 179, 71, 0.10), 0 1px 2px rgba(0, 0, 0, 0.03); --card-shadow-hover: 0 12px 40px rgba(255, 179, 71, 0.18), 0 2px 6px rgba(0, 0, 0, 0.04); /* Aurora orbs — pre-blurred gradients (no filter:blur) */ --orb-1: radial-gradient(circle at 20% 20%, rgba(255, 200, 120, 0.35) 0%, rgba(255, 200, 120, 0.15) 30%, rgba(255, 200, 120, 0.04) 55%, transparent 75%); --orb-2: radial-gradient(circle at 80% 30%, rgba(150, 200, 255, 0.28) 0%, rgba(150, 200, 255, 0.12) 28%, rgba(150, 200, 255, 0.03) 50%, transparent 70%); --orb-3: radial-gradient(circle at 40% 80%, rgba(255, 150, 200, 0.22) 0%, rgba(255, 150, 200, 0.09) 25%, rgba(255, 150, 200, 0.02) 45%, transparent 65%); --orb-4: radial-gradient(circle at 70% 70%, rgba(120, 230, 160, 0.20) 0%, rgba(120, 230, 160, 0.08) 28%, rgba(120, 230, 160, 0.02) 50%, transparent 70%); /* Hero */ --hero-bg: transparent; --hero-text: #3D2C2C; --cta-bg: #FFB347; --cta-text: #FFFFFF; --cta-shadow: 0 4px 20px rgba(255, 179, 71, 0.35); /* Footer */ --footer-bg: rgba(255, 243, 224, 0.82); --footer-border: rgba(255, 179, 71, 0.15); } /* -------------------------------------------------------------------------- 3. THEME — Nørdegiraf (mirrors GirafPingvin, only logo differs) -------------------------------------------------------------------------- */ [data-theme="nordegiraf"] { --color-primary: #FFB347; --color-primary-rgb: 255, 179, 71; --color-secondary: #77DD77; --color-accent: #FF6B9D; --color-bg: #FFF9F0; --color-bg-alt: #FFF3E0; --color-surface: rgba(255, 255, 255, 0.55); --color-surface-solid: #FFFFFF; --color-text: #3D2C2C; --color-text-muted: #8B7E74; --color-link: #E07B39; --color-link-hover: #C0612A; /* Liquid Glass Nav */ --glass-bg: rgba(255, 255, 255, 0.78); --glass-border: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 179, 71, 0.2) 50%, rgba(255, 255, 255, 0.4) 100%); --glass-shadow: 0 8px 32px rgba(255, 179, 71, 0.10), 0 1px 3px rgba(0, 0, 0, 0.04); --glass-blur: blur(24px) saturate(180%); --nav-text: #1A1A1A; --nav-active: #C0612A; --pill-bg: rgba(255, 179, 71, 0.15); --pill-active-bg: rgba(255, 179, 71, 0.22); --pill-glass-bg: rgba(255, 179, 71, 0.14); --pill-glass-border: rgba(255, 179, 71, 0.22); --pill-glass-glow: rgba(255, 179, 71, 0.12); --pill-glass-highlight: rgba(255, 255, 255, 0.35); /* Lang toggle */ --lang-bg: rgba(255, 255, 255, 0.10); --lang-active-bg: rgba(255, 255, 255, 0.55); --lang-active-text: #1A1A1A; /* Typography */ --font-heading: 'Nunito', 'Comic Neue', system-ui, sans-serif; --font-body: 'Nunito', system-ui, sans-serif; --font-weight-heading: 800; --font-weight-body: 400; /* Shape */ --radius-sm: 12px; --radius-md: 20px; --radius-lg: 28px; --radius-pill: 9999px; --radius-card: 24px; /* Cards */ --card-bg: rgba(255, 255, 255, 0.72); --card-border: rgba(255, 255, 255, 0.65); --card-shadow: 0 4px 24px rgba(255, 179, 71, 0.10), 0 1px 2px rgba(0, 0, 0, 0.03); --card-shadow-hover: 0 12px 40px rgba(255, 179, 71, 0.18), 0 2px 6px rgba(0, 0, 0, 0.04); /* Aurora orbs — pre-blurred gradients (no filter:blur) */ --orb-1: radial-gradient(circle at 20% 20%, rgba(255, 200, 120, 0.35) 0%, rgba(255, 200, 120, 0.15) 30%, rgba(255, 200, 120, 0.04) 55%, transparent 75%); --orb-2: radial-gradient(circle at 80% 30%, rgba(150, 200, 255, 0.28) 0%, rgba(150, 200, 255, 0.12) 28%, rgba(150, 200, 255, 0.03) 50%, transparent 70%); --orb-3: radial-gradient(circle at 40% 80%, rgba(255, 150, 200, 0.22) 0%, rgba(255, 150, 200, 0.09) 25%, rgba(255, 150, 200, 0.02) 45%, transparent 65%); --orb-4: radial-gradient(circle at 70% 70%, rgba(120, 230, 160, 0.20) 0%, rgba(120, 230, 160, 0.08) 28%, rgba(120, 230, 160, 0.02) 50%, transparent 70%); /* Hero */ --hero-bg: transparent; --hero-text: #3D2C2C; --cta-bg: #FFB347; --cta-text: #FFFFFF; --cta-shadow: 0 4px 20px rgba(255, 179, 71, 0.35); /* Footer */ --footer-bg: rgba(255, 243, 224, 0.82); --footer-border: rgba(255, 179, 71, 0.15); } /* -------------------------------------------------------------------------- 4. THEME — Bag Masken (neutral, elegant bridge) -------------------------------------------------------------------------- */ [data-theme="about"] { --color-primary: #6C8EBF; --color-primary-rgb: 108, 142, 191; --color-secondary: #D4A574; --color-accent: #9B7ED8; --color-bg: #F4F3EE; --color-bg-alt: #EDECEA; --color-surface: rgba(255, 255, 255, 0.50); --color-surface-solid: #FFFFFF; --color-text: #2C2C2C; --color-text-muted: #6E6E6E; --color-link: #6C8EBF; --color-link-hover: #4A6D9E; --glass-bg: rgba(255, 255, 255, 0.72); --glass-border: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(108, 142, 191, 0.15) 50%, rgba(255, 255, 255, 0.35) 100%); --glass-shadow: 0 8px 32px rgba(108, 142, 191, 0.08), 0 1px 3px rgba(0, 0, 0, 0.03); --glass-blur: blur(24px) saturate(180%); --nav-text: #1A1A1A; --nav-active: #4A6D9E; --pill-bg: rgba(108, 142, 191, 0.10); --pill-active-bg: rgba(108, 142, 191, 0.18); --pill-glass-bg: rgba(108, 142, 191, 0.10); --pill-glass-border: rgba(108, 142, 191, 0.16); --pill-glass-glow: rgba(108, 142, 191, 0.08); --pill-glass-highlight: rgba(255, 255, 255, 0.28); --lang-bg: rgba(108, 142, 191, 0.08); --lang-active-bg: rgba(255, 255, 255, 0.55); --lang-active-text: #FFFFFF; --font-heading: 'Inter', 'Nunito', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-weight-heading: 700; --font-weight-body: 400; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 9999px; --radius-card: 20px; --card-bg: rgba(255, 255, 255, 0.68); --card-border: rgba(255, 255, 255, 0.55); --card-shadow: 0 3px 20px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02); --card-shadow-hover: 0 8px 36px rgba(108, 142, 191, 0.12), 0 2px 4px rgba(0, 0, 0, 0.03); --orb-1: radial-gradient(circle at 30% 25%, rgba(108, 142, 191, 0.20) 0%, rgba(108, 142, 191, 0.08) 28%, rgba(108, 142, 191, 0.02) 48%, transparent 70%); --orb-2: radial-gradient(circle at 70% 20%, rgba(155, 126, 216, 0.15) 0%, rgba(155, 126, 216, 0.06) 25%, rgba(155, 126, 216, 0.015) 45%, transparent 65%); --orb-3: radial-gradient(circle at 50% 75%, rgba(212, 165, 116, 0.15) 0%, rgba(212, 165, 116, 0.06) 25%, rgba(212, 165, 116, 0.015) 45%, transparent 65%); --orb-4: radial-gradient(circle at 20% 70%, rgba(108, 142, 191, 0.10) 0%, rgba(108, 142, 191, 0.04) 25%, rgba(108, 142, 191, 0.01) 45%, transparent 65%); --hero-bg: transparent; --hero-text: #2C2C2C; --cta-bg: #6C8EBF; --cta-text: #FFFFFF; --cta-shadow: 0 4px 20px rgba(108, 142, 191, 0.25); --footer-bg: rgba(237, 236, 234, 0.72); --footer-border: rgba(108, 142, 191, 0.12); } /* -------------------------------------------------------------------------- 4b. DARK / LIGHT MODE OVERRIDES -------------------------------------------------------------------------- */ /* --- GirafPingvin dark --------------------------------------------------- */ [data-theme="girafpingvin"][data-mode="dark"] { --color-bg: #14100A; --color-bg-alt: #1C1610; --color-surface: rgba(255, 255, 255, 0.04); --color-surface-solid: #1C1610; --color-text: #F0E6D6; --color-text-muted: #9B8E7E; --color-link: #FFB347; --color-link-hover: #FFCC80; --glass-bg: rgba(28, 22, 16, 0.82); --glass-border: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 179, 71, 0.15) 50%, rgba(255, 255, 255, 0.06) 100%); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 0 0.5px rgba(255, 255, 255, 0.06); --nav-text: #F0E6D6; --nav-active: #FFB347; --pill-glass-bg: rgba(255, 179, 71, 0.10); --pill-glass-border: rgba(255, 179, 71, 0.18); --pill-glass-glow: rgba(255, 179, 71, 0.08); --pill-glass-highlight: rgba(255, 255, 255, 0.08); --pill-bg: rgba(255, 179, 71, 0.10); --lang-bg: rgba(255, 179, 71, 0.08); --lang-active-bg: rgba(255, 255, 255, 0.25); --lang-active-text: #FFB347; --card-bg: rgba(255, 255, 255, 0.07); --card-border: rgba(255, 255, 255, 0.06); --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.30); --card-shadow-hover: 0 12px 40px rgba(255, 179, 71, 0.10); --orb-1: radial-gradient(circle at 20% 20%, rgba(255, 179, 71, 0.11) 0%, rgba(255, 179, 71, 0.05) 30%, rgba(255, 179, 71, 0.01) 55%, transparent 75%); --orb-2: radial-gradient(circle at 80% 30%, rgba(120, 160, 255, 0.08) 0%, rgba(120, 160, 255, 0.03) 28%, rgba(120, 160, 255, 0.008) 50%, transparent 70%); --orb-3: radial-gradient(circle at 40% 80%, rgba(255, 120, 170, 0.06) 0%, rgba(255, 120, 170, 0.025) 25%, rgba(255, 120, 170, 0.006) 45%, transparent 65%); --orb-4: radial-gradient(circle at 70% 70%, rgba(100, 200, 130, 0.05) 0%, rgba(100, 200, 130, 0.02) 28%, rgba(100, 200, 130, 0.005) 50%, transparent 70%); --hero-text: #F0E6D6; --cta-bg: rgba(255, 179, 71, 0.18); --cta-text: #FFB347; --cta-shadow: 0 4px 24px rgba(255, 179, 71, 0.15); --footer-bg: rgba(20, 16, 10, 0.80); --footer-border: rgba(255, 179, 71, 0.08); } /* --- About dark ---------------------------------------------------------- */ [data-theme="about"][data-mode="dark"] { --color-bg: #0E0F14; --color-bg-alt: #14161C; --color-surface: rgba(255, 255, 255, 0.04); --color-surface-solid: #14161C; --color-text: #DDE2EA; --color-text-muted: #7A8090; --color-link: #8AABE0; --color-link-hover: #A8C4F0; --glass-bg: rgba(20, 22, 28, 0.82); --glass-border: linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(108, 142, 191, 0.12) 50%, rgba(255, 255, 255, 0.05) 100%); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 0 0.5px rgba(255, 255, 255, 0.05); --nav-text: #DDE2EA; --nav-active: #8AABE0; --pill-glass-bg: rgba(108, 142, 191, 0.08); --pill-glass-border: rgba(108, 142, 191, 0.14); --pill-glass-glow: rgba(108, 142, 191, 0.06); --pill-glass-highlight: rgba(255, 255, 255, 0.06); --pill-bg: rgba(108, 142, 191, 0.08); --lang-bg: rgba(108, 142, 191, 0.06); --lang-active-bg: rgba(255, 255, 255, 0.25); --lang-active-text: #8AABE0; --card-bg: rgba(255, 255, 255, 0.07); --card-border: rgba(255, 255, 255, 0.05); --card-shadow: 0 3px 20px rgba(0, 0, 0, 0.30); --card-shadow-hover: 0 8px 36px rgba(108, 142, 191, 0.08); --orb-1: radial-gradient(circle at 30% 25%, rgba(108, 142, 191, 0.08) 0%, rgba(108, 142, 191, 0.03) 28%, rgba(108, 142, 191, 0.008) 48%, transparent 70%); --orb-2: radial-gradient(circle at 70% 20%, rgba(155, 126, 216, 0.06) 0%, rgba(155, 126, 216, 0.025) 25%, rgba(155, 126, 216, 0.006) 45%, transparent 65%); --orb-3: radial-gradient(circle at 50% 75%, rgba(180, 140, 100, 0.05) 0%, rgba(180, 140, 100, 0.02) 25%, rgba(180, 140, 100, 0.005) 45%, transparent 65%); --orb-4: radial-gradient(circle at 20% 70%, rgba(108, 142, 191, 0.04) 0%, rgba(108, 142, 191, 0.015) 25%, rgba(108, 142, 191, 0.004) 45%, transparent 65%); --hero-text: #DDE2EA; --cta-bg: rgba(108, 142, 191, 0.18); --cta-text: #8AABE0; --cta-shadow: 0 4px 20px rgba(108, 142, 191, 0.12); --footer-bg: rgba(14, 15, 20, 0.80); --footer-border: rgba(108, 142, 191, 0.06); } /* --- Nørdegiraf dark (mirrors GirafPingvin dark) ------------------------- */ [data-theme="nordegiraf"][data-mode="dark"] { --color-bg: #14100A; --color-bg-alt: #1C1610; --color-surface: rgba(255, 255, 255, 0.04); --color-surface-solid: #1C1610; --color-text: #F0E6D6; --color-text-muted: #9B8E7E; --color-link: #FFB347; --color-link-hover: #FFCC80; --glass-bg: rgba(28, 22, 16, 0.82); --glass-border: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 179, 71, 0.15) 50%, rgba(255, 255, 255, 0.06) 100%); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 0 0.5px rgba(255, 255, 255, 0.06); --nav-text: #F0E6D6; --nav-active: #FFB347; --pill-glass-bg: rgba(255, 179, 71, 0.10); --pill-glass-border: rgba(255, 179, 71, 0.18); --pill-glass-glow: rgba(255, 179, 71, 0.08); --pill-glass-highlight: rgba(255, 255, 255, 0.08); --pill-bg: rgba(255, 179, 71, 0.10); --lang-bg: rgba(255, 179, 71, 0.08); --lang-active-bg: rgba(255, 255, 255, 0.25); --lang-active-text: #FFB347; --card-bg: rgba(255, 255, 255, 0.07); --card-border: rgba(255, 255, 255, 0.06); --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.30); --card-shadow-hover: 0 12px 40px rgba(255, 179, 71, 0.10); --orb-1: radial-gradient(circle at 20% 20%, rgba(255, 179, 71, 0.11) 0%, rgba(255, 179, 71, 0.05) 30%, rgba(255, 179, 71, 0.01) 55%, transparent 75%); --orb-2: radial-gradient(circle at 80% 30%, rgba(120, 160, 255, 0.08) 0%, rgba(120, 160, 255, 0.03) 28%, rgba(120, 160, 255, 0.008) 50%, transparent 70%); --orb-3: radial-gradient(circle at 40% 80%, rgba(255, 120, 170, 0.06) 0%, rgba(255, 120, 170, 0.025) 25%, rgba(255, 120, 170, 0.006) 45%, transparent 65%); --orb-4: radial-gradient(circle at 70% 70%, rgba(100, 200, 130, 0.05) 0%, rgba(100, 200, 130, 0.02) 28%, rgba(100, 200, 130, 0.005) 50%, transparent 70%); --hero-text: #F0E6D6; --cta-bg: rgba(255, 179, 71, 0.18); --cta-text: #FFB347; --cta-shadow: 0 4px 24px rgba(255, 179, 71, 0.15); --footer-bg: rgba(20, 16, 10, 0.80); --footer-border: rgba(255, 179, 71, 0.08); } /* -------------------------------------------------------------------------- 5. ANIMATED AURORA BACKGROUND -------------------------------------------------------------------------- */ .aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--color-bg); } .aurora__orb { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: 1; will-change: transform; } .aurora__orb:nth-child(1) { background: var(--orb-1); top: -15%; left: -10%; animation: drift-1 22s ease-in-out infinite alternate; } .aurora__orb:nth-child(2) { background: var(--orb-2); top: -10%; right: -15%; animation: drift-2 26s ease-in-out infinite alternate; } .aurora__orb:nth-child(3) { background: var(--orb-3); bottom: -20%; left: 10%; animation: drift-3 20s ease-in-out infinite alternate; } .aurora__orb:nth-child(4) { background: var(--orb-4); bottom: -10%; right: 5%; animation: drift-4 24s ease-in-out infinite alternate; } @keyframes drift-1 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(12vw, 8vh) scale(1.15); } } @keyframes drift-2 { 0% { transform: translate(0, 0) scale(1.05); } 100% { transform: translate(-10vw, 12vh) scale(0.9); } } @keyframes drift-3 { 0% { transform: translate(0, 0) scale(0.95); } 100% { transform: translate(8vw, -10vh) scale(1.1); } } @keyframes drift-4 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-14vw, -6vh) scale(1.08); } } @media (prefers-reduced-motion: reduce) { .aurora__orb { animation: none !important; } } /* -------------------------------------------------------------------------- 6. FLOATING PILL NAVIGATION — Liquid Glass -------------------------------------------------------------------------- */ .site-nav { position: fixed; top: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 1000; width: calc(100% - 2.5rem); max-width: 860px; } .nav-pill { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; height: 56px; padding: 0 0.5rem 0 0.25rem; border-radius: 14px 9999px 9999px 14px; overflow: visible; /* Liquid glass core */ background: var(--glass-bg); box-shadow: var(--glass-shadow); /* Transition the glass itself on theme change */ transition: background 0.6s ease, box-shadow 0.6s ease; } /* Gradient border via pseudo-element (much cleaner than border-image) */ .nav-pill::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--glass-border); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; transition: background 0.6s ease; } /* --- Logo ---------------------------------------------------------------- */ .nav-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; /* Allow logo to overflow the pill vertically */ position: relative; z-index: 2; align-self: center; padding: 20px 4px; margin: -20px 0; } .nav-logo__img { width: 80px; height: auto; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.10)); } .nav-logo:hover .nav-logo__img { transform: scale(1.1) rotate(-4deg); } /* Wrap: robot logo bottom-aligned with pill, giraffe sticks out the top */ [data-site="wrap"] .nav-logo { align-self: flex-end; } [data-site="wrap"] .nav-logo__img { width: 63px; margin: -7px 0 0 0; } /* --- Center links with sliding indicator --------------------------------- */ .nav-center { display: flex; align-items: center; position: relative; } .nav-links { display: flex; list-style: none; gap: 2px; position: relative; padding: 4px; } /* The sliding pill indicator — liquid glass */ .nav-indicator { position: absolute; height: calc(100% - 8px); top: 4px; left: 0; border-radius: var(--radius-pill); background: var(--pill-glass-bg); border: 1px solid var(--pill-glass-border); box-shadow: inset 0 1px 0 var(--pill-glass-highlight), inset 0 -0.5px 0 rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03), 0 0 20px var(--pill-glass-glow); transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, opacity 0.25s ease; pointer-events: none; opacity: 0; z-index: 0; overflow: hidden; } /* Top-edge light refraction on indicator */ .nav-indicator::before { content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 45%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.08) 60%, transparent 100%); border-radius: var(--radius-pill) var(--radius-pill) 50% 50%; pointer-events: none; } .nav-indicator.visible { opacity: 1; } .nav-links a { position: relative; z-index: 1; display: block; padding: 0.4rem 0.9rem; border-radius: var(--radius-pill); color: var(--nav-text); font-family: var(--font-body); font-size: 0.88rem; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap; transition: color 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); -webkit-user-select: none; user-select: none; } .nav-links a:hover { color: var(--nav-active); transform: scale(1.04); } .nav-links a.active { color: var(--nav-active); } /* --- Nørdezone Floating Bubble ------------------------------------------- */ .norde-bubble { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 1000; display: flex; align-items: center; height: 52px; padding: 4px; border-radius: 9999px; text-decoration: none; cursor: pointer; /* Liquid glass */ background: linear-gradient(135deg, rgba(0, 212, 170, 0.12) 0%, rgba(124, 77, 255, 0.08) 100%); border: 1.5px solid rgba(0, 212, 170, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), inset 0 -0.5px 0 rgba(0, 0, 0, 0.04), 0 4px 20px rgba(0, 0, 0, 0.08), 0 0 20px rgba(0, 212, 170, 0.08); /* Expand transition */ width: 52px; overflow: hidden; transition: width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.35s ease, border-color 0.35s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Top refraction */ .norde-bubble::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.05) 60%, transparent 100%); border-radius: 9999px; pointer-events: none; z-index: 0; } /* Subtle pulsing glow ring around the bubble */ .norde-bubble__ring { position: absolute; inset: -3px; border-radius: 9999px; border: 1.5px solid rgba(0, 212, 170, 0.15); animation: norde-pulse 3s ease-in-out infinite; pointer-events: none; } @keyframes norde-pulse { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.06); } } /* Robot logo */ .norde-bubble__logo { width: 44px; height: 44px; border-radius: 50%; object-fit: contain; flex-shrink: 0; position: relative; z-index: 1; filter: drop-shadow(0 2px 6px rgba(0, 212, 170, 0.15)); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .norde-bubble:hover .norde-bubble__logo { transform: rotate(-8deg) scale(1.08); } /* Expanding text area */ .norde-bubble__text { display: flex; align-items: center; gap: 6px; padding: 0 4px 0 8px; white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: opacity 0.3s ease 0.05s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s; position: relative; z-index: 1; } .norde-bubble__label { font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; color: var(--nav-text); letter-spacing: 0.01em; transition: color 0.3s ease; } .norde-bubble__arrow { color: rgba(0, 212, 170, 0.6); flex-shrink: 0; transition: color 0.3s ease, transform 0.3s ease; } /* === Hover: expand to reveal text === */ .norde-bubble:hover { width: 248px; background: linear-gradient(135deg, rgba(0, 212, 170, 0.18) 0%, rgba(124, 77, 255, 0.12) 100%); border-color: rgba(0, 212, 170, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 28px rgba(0, 0, 0, 0.10), 0 0 30px rgba(0, 212, 170, 0.12); } .norde-bubble:hover .norde-bubble__text { opacity: 1; transform: translateX(0); } .norde-bubble:hover .norde-bubble__label { color: #00D4AA; } .norde-bubble:hover .norde-bubble__arrow { color: #00D4AA; transform: translateX(2px); } .norde-bubble:hover .norde-bubble__ring { animation: none; opacity: 0; } .norde-bubble:active { transform: scale(0.95); } /* Dark mode */ [data-mode="dark"] .norde-bubble { background: linear-gradient(135deg, rgba(0, 212, 170, 0.08) 0%, rgba(124, 77, 255, 0.06) 100%); border-color: rgba(0, 212, 170, 0.15); } [data-mode="dark"] .norde-bubble__label { color: rgba(255, 255, 255, 0.75); } [data-mode="dark"] .norde-bubble:hover { background: linear-gradient(135deg, rgba(0, 212, 170, 0.14) 0%, rgba(124, 77, 255, 0.10) 100%); border-color: rgba(0, 212, 170, 0.28); } [data-mode="dark"] .norde-bubble:hover .norde-bubble__label { color: #00D4AA; } /* --- Unified controls capsule (lang + mode — liquid glass) --------------- */ .nav-controls { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: var(--pill-glass-bg); border: 1px solid var(--pill-glass-border); flex-shrink: 0; margin-left: auto; position: relative; overflow: hidden; box-shadow: inset 0 1px 0 var(--pill-glass-highlight), inset 0 -0.5px 0 rgba(0, 0, 0, 0.03), 0 1px 4px rgba(0, 0, 0, 0.04), 0 0 14px var(--pill-glass-glow); transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } /* Top-edge refraction on the capsule */ .nav-controls::before { content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.06) 55%, transparent 100%); border-radius: var(--radius-pill); pointer-events: none; z-index: 0; } /* Shared button style for all items in the capsule */ .nav-controls__btn { border: none; background: transparent; padding: 0.28rem 0.45rem; font-size: 0.75rem; font-family: var(--font-body); font-weight: 700; color: var(--nav-text); border-radius: var(--radius-pill); cursor: pointer; position: relative; z-index: 1; letter-spacing: 0.03em; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background 0.3s ease, color 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } /* SVG flag icons inside lang buttons */ .lang-flag { width: 20px; height: 15px; border-radius: 2px; display: block; filter: drop-shadow(0 0.5px 1px rgba(0, 0, 0, 0.12)); transition: filter 0.3s ease; } .nav-lang__btn:hover .lang-flag { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.18)); } .nav-lang__btn.active .lang-flag { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15)); } /* Robot icon as "language" */ .lang-flag--robot { width: 20px; height: 20px; border-radius: 50%; object-fit: contain; filter: drop-shadow(0 0.5px 1px rgba(0, 0, 0, 0.10)); } .nav-lang__norde { text-decoration: none; } .nav-lang__norde:hover .lang-flag--robot { filter: drop-shadow(0 1px 4px rgba(0, 212, 170, 0.3)); } .nav-controls__btn:hover { background: rgba(255, 255, 255, 0.12); transform: scale(1.08); } [data-mode="dark"] .nav-controls__btn:hover { background: rgba(255, 255, 255, 0.08); } .nav-controls__btn:active { transform: scale(0.94); } /* Active lang button — text only, background handled by indicator */ .nav-controls__btn.nav-lang__btn.active { color: var(--lang-active-text); background: transparent; } /* Sliding liquid glass indicator behind active lang button */ .nav-lang__indicator { position: absolute; top: 3px; left: 3px; height: calc(100% - 6px); width: 28px; z-index: 0; pointer-events: none; /* Liquid glass fill */ background: var(--lang-active-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -0.5px 0 rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 10px var(--pill-glass-glow); /* Default shape: capsule-left, square-right (DK position) */ border-radius: 9999px 5px 5px 9999px; /* Top-edge refraction */ overflow: hidden; /* Smooth morph transitions */ transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-radius 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.35s ease, box-shadow 0.35s ease; } /* Refraction highlight on the indicator */ .nav-lang__indicator::before { content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 55%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.08) 60%, transparent 100%); border-radius: inherit; pointer-events: none; } /* Shape variants — set by JS via data-pos */ .nav-lang__indicator[data-pos="left"] { border-radius: 9999px 5px 5px 9999px; } .nav-lang__indicator[data-pos="center"] { border-radius: 5px; } .nav-lang__indicator[data-pos="right"] { border-radius: 5px 9999px 9999px 5px; } /* Glass divider between lang & mode */ .nav-controls__divider { width: 1px; height: 16px; margin: 0 2px; background: linear-gradient(180deg, transparent 0%, var(--pill-glass-border) 30%, var(--pill-glass-border) 70%, transparent 100%); flex-shrink: 0; opacity: 0.6; z-index: 1; } /* Mode toggle button inside the capsule */ .nav-controls__btn.nav-mode-toggle { width: 30px; height: 28px; padding: 0; position: relative; overflow: hidden; } /* Icon switching: show sun in dark mode, moon in light mode */ .nav-mode-toggle__icon { position: absolute; transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Default (light mode): show moon, hide sun */ .nav-mode-toggle__sun { opacity: 0; transform: scale(0.5) rotate(90deg); } .nav-mode-toggle__moon { opacity: 1; transform: scale(1) rotate(0deg); } /* Dark mode: show sun, hide moon */ .nav-mode-toggle.is-dark .nav-mode-toggle__sun { opacity: 1; transform: scale(1) rotate(0deg); } .nav-mode-toggle.is-dark .nav-mode-toggle__moon { opacity: 0; transform: scale(0.5) rotate(-90deg); } /* --- Mobile hamburger ---------------------------------------------------- */ .nav-hamburger { display: none; border: none; background: transparent; color: var(--nav-text); font-size: 1.3rem; cursor: pointer; padding: 0.3rem; line-height: 1; border-radius: var(--radius-sm); transition: background 0.2s ease; } .nav-hamburger:hover { background: var(--pill-bg); } /* -------------------------------------------------------------------------- 7. CONTEXTUAL SUB-PILL — Slim Glass Secondary Nav -------------------------------------------------------------------------- */ .sub-nav { position: fixed; top: calc(1.25rem + 56px + 14px); left: 50%; transform: translateX(-50%); z-index: 999; } .sub-pill { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 4px; border-radius: var(--radius-pill); /* Lighter glass — visually subordinate */ background: var(--subglass-bg); box-shadow: var(--subglass-shadow); border: 1px solid var(--subglass-border); transition: background 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease; } .sub-pill__links { display: flex; align-items: center; gap: 2px; } /* Fade-swap animation states */ .sub-pill__links.fade-out { animation: subFadeOut 0.18s ease forwards; } .sub-pill__links.fade-in { animation: subFadeIn 0.25s ease forwards; } @keyframes subFadeOut { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(4px); } } @keyframes subFadeIn { 0% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 1; transform: translateY(0); } } .sub-pill__links a { display: block; padding: 0.28rem 0.75rem; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.005em; white-space: nowrap; color: var(--nav-text); opacity: 0.65; transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease; } .sub-pill__links a:hover { opacity: 1; background: var(--pill-bg); color: var(--nav-active); } .sub-pill__links a.active { opacity: 1; color: var(--nav-active); background: var(--pill-active-bg); } /* Sub-glass per-theme variables */ [data-theme="girafpingvin"] { --subglass-bg: rgba(255, 255, 255, 0.30); --subglass-border: rgba(255, 255, 255, 0.50); --subglass-shadow: 0 4px 20px rgba(255, 179, 71, 0.06), 0 0.5px 0 rgba(255, 255, 255, 0.4) inset; } [data-theme="nordegiraf"] { --subglass-bg: rgba(255, 255, 255, 0.30); --subglass-border: rgba(255, 255, 255, 0.50); --subglass-shadow: 0 4px 20px rgba(255, 179, 71, 0.06), 0 0.5px 0 rgba(255, 255, 255, 0.4) inset; } [data-theme="about"] { --subglass-bg: rgba(255, 255, 255, 0.26); --subglass-border: rgba(255, 255, 255, 0.42); --subglass-shadow: 0 4px 20px rgba(108, 142, 191, 0.05), 0 0.5px 0 rgba(255, 255, 255, 0.3) inset; } /* -------------------------------------------------------------------------- 8. HERO SECTION -------------------------------------------------------------------------- */ .hero { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 85vh; padding: 8rem 1.5rem 5rem; background: var(--hero-bg); color: var(--hero-text); transition: color 0.6s ease; } .hero__badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 1rem; border-radius: var(--radius-pill); background: var(--card-bg); border: 1px solid var(--card-border); font-size: 0.82rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: 1.5rem; transition: background 0.4s ease, border-color 0.4s ease; } .hero__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 1.25rem; max-width: 750px; } .hero__subtitle { font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.7; color: var(--color-text-muted); max-width: 560px; margin-bottom: 2.5rem; } .hero__cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.9rem 2rem; border-radius: var(--radius-pill); background: var(--cta-bg); color: var(--cta-text); font-family: var(--font-heading); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; box-shadow: var(--cta-shadow); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; } .hero__cta:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--cta-shadow), 0 0 0 4px rgba(var(--color-primary-rgb), 0.12); color: var(--cta-text); } .hero__cta:active { transform: translateY(0) scale(0.98); } /* -------------------------------------------------------------------------- 8. CONTENT LAYOUT -------------------------------------------------------------------------- */ .container { position: relative; max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; } .section { padding: 5rem 0; } .section__heading { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: clamp(1.6rem, 3vw, 2.5rem); letter-spacing: -0.025em; margin-bottom: 0.5rem; color: var(--color-text); } .section__lead { color: var(--color-text-muted); font-size: 1.1rem; line-height: 1.7; margin-bottom: 2.5rem; max-width: 600px; } /* -------------------------------------------------------------------------- 9. GLASS CARDS -------------------------------------------------------------------------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .card { position: relative; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-card); padding: 2rem; box-shadow: var(--card-shadow); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, background 0.5s ease, border-color 0.5s ease; } .card:hover { transform: translateY(-6px); box-shadow: var(--card-shadow-hover); } .card__icon { font-size: 2.5rem; margin-bottom: 1rem; line-height: 1; } .card__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.2rem; letter-spacing: -0.015em; margin-bottom: 0.5rem; color: var(--color-text); } .card__text { color: var(--color-text-muted); font-size: 0.93rem; line-height: 1.7; } /* -------------------------------------------------------------------------- 10. FOOTER — Frosted -------------------------------------------------------------------------- */ .site-footer { position: relative; background: var(--footer-bg); border-top: 1px solid var(--footer-border); padding: 3.5rem 1.5rem 2rem; transition: background 0.5s ease, border-color 0.5s ease; } .footer__inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .footer__heading { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 0.95rem; color: var(--color-text); margin-bottom: 0.75rem; letter-spacing: -0.01em; } .footer__links { list-style: none; } .footer__links li + li { margin-top: 0.35rem; } .footer__links a { color: var(--color-text-muted); font-size: 0.88rem; transition: color 0.2s ease; } .footer__links a:hover { color: var(--color-primary); } .footer__copy { grid-column: 1 / -1; text-align: center; padding-top: 2rem; margin-top: 1rem; border-top: 1px solid var(--footer-border); color: var(--color-text-muted); font-size: 0.82rem; } /* -------------------------------------------------------------------------- 11. THEME TOGGLE BUTTON (demo) -------------------------------------------------------------------------- */ .theme-toggle { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 999; display: flex; gap: 0.4rem; padding: 5px; border-radius: var(--radius-pill); background: var(--glass-bg); box-shadow: var(--glass-shadow); border: none; transition: background 0.4s ease, box-shadow 0.4s ease; } /* Gradient border on toggle too */ .theme-toggle::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--glass-border); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .theme-toggle__btn { border: none; background: transparent; padding: 0.5rem 0.85rem; font-size: 0.8rem; font-family: var(--font-body); font-weight: 600; color: var(--nav-text); border-radius: var(--radius-pill); cursor: pointer; transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease; position: relative; z-index: 1; } .theme-toggle__btn:hover { background: var(--pill-bg); } .theme-toggle__btn.active { background: var(--pill-active-bg); color: var(--nav-active); } /* -------------------------------------------------------------------------- 12. RESPONSIVE -------------------------------------------------------------------------- */ @media (max-width: 768px) { .site-nav { top: 0.75rem; width: calc(100% - 1.5rem); } .sub-nav { top: calc(0.75rem + 50px + 10px); max-width: calc(100% - 1.5rem); } .sub-pill { height: 34px; padding: 0 2px; } .sub-pill__links a { padding: 0.22rem 0.55rem; font-size: 0.72rem; } .nav-pill { height: 50px; padding: 0 0.5rem 0 0.5rem; } .nav-logo__img { width: 64px; margin: -14px 0; } [data-site="wrap"] .nav-logo__img { margin: -14px 0 0 0; } .nav-center { display: none; position: absolute; top: calc(100% + 0.5rem); left: 0; right: 0; flex-direction: column; background: rgba(255, 255, 255, 0.92); border-radius: var(--radius-lg); box-shadow: var(--glass-shadow); padding: 0.5rem; border: 1px solid var(--card-border); } [data-mode="dark"] .nav-center { background: rgba(20, 22, 28, 0.94); } .nav-center::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--glass-border); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .nav-center.open { display: flex; } .nav-links { flex-direction: column; width: 100%; gap: 2px; } .nav-links a { padding: 0.6rem 1rem; border-radius: var(--radius-md); width: 100%; } .nav-indicator { display: none; } .nav-hamburger { display: block; } /* Nørdezone bubble — bottom-right on mobile */ .norde-bubble { bottom: 1rem; right: 1rem; width: 48px; height: 48px; } .norde-bubble__logo { width: 40px; height: 40px; } .norde-bubble:hover { width: 48px; } .norde-bubble__text { display: none; } .hero { min-height: 70vh; padding: 6rem 1.25rem 4rem; } .card-grid { grid-template-columns: 1fr; } .footer__inner { grid-template-columns: 1fr; } } @media (max-width: 480px) { .hero__title { font-size: 2rem; } } /* -------------------------------------------------------------------------- 13. UTILITIES -------------------------------------------------------------------------- */ .text-center { text-align: center; } .text-muted { color: var(--color-text-muted); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 14. STORY TIMELINE — Full-bleed infinite scroll -------------------------------------------------------------------------- */ .story-timeline { position: relative; padding-top: 1rem; /* body padding-top already clears the nav */ padding-bottom: 0.5rem; overflow: hidden; } .story-timeline__track { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 2rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-behavior: smooth; } .story-timeline__track::-webkit-scrollbar { display: none; } /* Time period labels */ .story-timeline__label { flex-shrink: 0; scroll-snap-align: start; } .story-timeline__label span { display: block; writing-mode: vertical-lr; text-orientation: mixed; transform: rotate(180deg); font-family: var(--font-heading); font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); opacity: 0.6; white-space: nowrap; padding: 0.3rem 0; } /* Right-edge fade hint */ .story-timeline__fade--right { position: absolute; top: 0; right: 0; bottom: 0; width: 80px; background: linear-gradient(to right, transparent, var(--color-bg)); pointer-events: none; z-index: 2; transition: opacity 0.4s ease; } /* Scroll hint text */ .story-timeline__hint { position: absolute; bottom: -0.1rem; right: 1.5rem; font-size: 0.62rem; font-weight: 700; color: var(--color-text-muted); opacity: 0.5; letter-spacing: 0.02em; z-index: 3; transition: opacity 0.5s ease; animation: hint-bob 2.5s ease-in-out infinite; } .story-timeline__hint.is-hidden { opacity: 0; pointer-events: none; } @keyframes hint-bob { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } } /* Loading sentinel */ .story-timeline__sentinel { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; } .story-timeline__sentinel.is-done { display: none; } .story-timeline__loader { display: flex; gap: 4px; align-items: center; } .story-timeline__loader span { width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-muted); opacity: 0.4; animation: loader-bounce 1s ease-in-out infinite; } .story-timeline__loader span:nth-child(2) { animation-delay: 0.15s; } .story-timeline__loader span:nth-child(3) { animation-delay: 0.3s; } @keyframes loader-bounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; } 40% { transform: scale(1); opacity: 0.8; } } /* New stories popping in */ @keyframes story-pop-in { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } } .story-ring--new { animation: story-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; } /* Date badge inside story viewer */ .story-viewer__date { position: absolute; bottom: max(20px, env(safe-area-inset-bottom, 20px)); left: 50%; transform: translateX(-50%); font-size: 0.7rem; font-weight: 700; color: rgba(255,255,255,0.6); background: rgba(0,0,0,0.55); padding: 0.3rem 0.8rem; border-radius: 20px; z-index: 3; pointer-events: none; } /* -------------------------------------------------------------------------- 15. BENTO GRID — Modern newspaper-style layout -------------------------------------------------------------------------- */ .bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: 1rem; padding-bottom: 0; } /* ── Shared cell base ───────────────────────────────────────────── */ .bento__cell { position: relative; border-radius: var(--radius-card); background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); overflow: hidden; will-change: transform; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; } .bento__cell:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); } /* ── Media link — fills cell, image inside ──────────────────────── */ .bento__media-link { display: block; position: relative; width: 100%; height: 100%; text-decoration: none; color: inherit; } .bento__media-link img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .bento__cell:hover .bento__media-link img { transform: scale(1.04); } /* ── Play button overlay ────────────────────────────────────────── */ .bento__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; opacity: 0; transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .bento__play svg { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.3)); } .bento__cell:hover .bento__play { opacity: 1; } .bento__play--sm { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); border-radius: 50%; color: #fff; font-size: 0.85rem; top: auto; left: auto; bottom: 12px; right: 12px; transform: none; opacity: 1; } /* ── Gradient overlay with text ─────────────────────────────────── */ .bento__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.25rem; background: linear-gradient( to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.15) 50%, transparent 100% ); z-index: 1; pointer-events: none; } .bento__overlay--compact { padding: 0.85rem; background: linear-gradient( to top, rgba(0, 0, 0, 0.6) 0%, transparent 70% ); } .bento__tag { display: inline-block; align-self: flex-start; padding: 0.2rem 0.55rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.22); color: #fff; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; } .bento__overlay-title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.4rem; line-height: 1.25; letter-spacing: -0.02em; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bento__overlay-title--sm { font-size: 0.9rem; -webkit-line-clamp: 2; } .bento__overlay-desc { font-size: 0.82rem; line-height: 1.5; color: rgba(255, 255, 255, 0.8); margin-top: 0.3rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ── Cell sizes on desktop ──────────────────────────────────────── */ /* Featured video: big, spans 2 cols */ .bento__cell--hero-video { grid-column: span 2; aspect-ratio: 16 / 9; } /* Featured blog: fills row height from video */ .bento__cell--hero-blog { min-height: 200px; } /* -------------------------------------------------------------------------- 15c. BENTO BOX — Playful 4-column colorful puzzle grid -------------------------------------------------------------------------- */ .bento-box { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; grid-auto-flow: dense; gap: 1.5rem; padding: 2rem 0 3rem; content-visibility: auto; contain-intrinsic-size: auto 1800px; } /* ── Item base ──────────────────────────────────────────────────── */ .bb__item { position: relative; border-radius: 28px; overflow: hidden; will-change: transform; box-shadow: 0 4px 0 var(--shadow-3d, rgba(0,0,0,0.06)), 0 8px 24px rgba(0,0,0,0.08); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .bb__item:hover { transform: translateY(-6px); box-shadow: 0 8px 0 var(--shadow-3d, rgba(0,0,0,0.08)), 0 18px 44px rgba(0,0,0,0.12); } /* ── Span classes ───────────────────────────────────────────────── */ .bb__item--2x2 { grid-column: span 2; grid-row: span 2; } .bb__item--tall { grid-row: span 2; } .bb__item--wide { grid-column: span 2; } /* ── Color palette ──────────────────────────────────────────────── */ .bb__item--mustard { background: #F2C14E; color: #3E2723; --shadow-3d: #C9A040; } .bb__item--coral { background: #FF8A65; color: #3E2723; --shadow-3d: #D46F50; } .bb__item--sky { background: #4FC3F7; color: #3E2723; --shadow-3d: #3A9BC5; } .bb__item--lime { background: #AED581; color: #3E2723; --shadow-3d: #8BB566; } .bb__item--pink { background: #F48FB1; color: #3E2723; --shadow-3d: #C7738E; } .bb__item--choco { background: #4E342E; color: #FFFFFF; --shadow-3d: #3A2720; } /* ── Link base ──────────────────────────────────────────────────── */ .bb__link { display: flex; flex-direction: column; width: 100%; height: 100%; text-decoration: none; color: inherit; } /* ── Video card ─────────────────────────────────────────────────── */ .bb__item--video .bb__link { position: relative; } .bb__item--video img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .bb__item--video:hover img { transform: scale(1.05); } .bb__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; opacity: 0; transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .bb__play svg { filter: drop-shadow(0 2px 12px rgba(0,0,0,0.3)); } .bb__item--video:hover .bb__play { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } .bb__vid-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.6rem 1rem; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%); z-index: 1; pointer-events: none; } .bb__vid-title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1rem; line-height: 1.3; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; } .bb__item--2x2 .bb__vid-title { font-size: 1.5rem; -webkit-line-clamp: 3; } .bb__item--tall .bb__vid-title, .bb__item--wide .bb__vid-title { font-size: 1.15rem; } /* ── Blog card — image with text overlay ─────────────────────────── */ .bb__item--blog .bb__link { position: relative; padding: 0; } .bb__blog-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .bb__item--blog:hover .bb__blog-img { transform: scale(1.05); } .bb__blog-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.2rem 1.3rem; background: linear-gradient( to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 50%, transparent 100% ); pointer-events: none; } .bb__cat { display: inline-block; align-self: flex-start; padding: 0.25rem 0.6rem; border-radius: 20px; background: rgba(255,255,255,0.25); font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: auto; color: #fff; } .bb__title { font-family: var(--font-heading); font-weight: 900; font-size: 1.05rem; line-height: 1.25; letter-spacing: -0.02em; margin: 0; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.3); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .bb__item--2x2 .bb__title, .bb__item--tall .bb__title { font-size: 1.65rem; -webkit-line-clamp: 5; } .bb__item--wide .bb__title { font-size: 1.25rem; -webkit-line-clamp: 2; } .bb__excerpt { font-size: 0.85rem; line-height: 1.5; margin: 0.5rem 0 0; color: rgba(255,255,255,0.85); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ── Stat card (in bento grid) ──────────────────────────────────── */ .bb__item--stat { display: flex; align-items: center; justify-content: center; } .bb__item--stat.bb__item--coral { background: #ff0033; --shadow-3d: #cc0029; } .bb__item--stat.bb__item--mustard { background: #ff0033; --shadow-3d: #cc0029; } .bb__item--stat.bb__item--pink { background: linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7); --shadow-3d: #b01f5c; } .bb__item--stat.bb__item--choco { background: #010101; --shadow-3d: #000; color: #fff; } .bb__item--stat-total { background: linear-gradient(135deg, #F2C14E, #FF8A65) !important; --shadow-3d: #C9A040 !important; color: #3E2723; } .bb__stat-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; text-align: center; padding: 1.2rem; } .bb__stat-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.2); margin-bottom: 0.25rem; } .bb__stat-icon--tk { background: rgba(255,255,255,0.12); border: 1px solid rgba(0,242,234,0.4); } .bb__stat-num { font-family: var(--font-heading); font-weight: 900; font-size: 1.8rem; line-height: 1.1; letter-spacing: -0.03em; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.15); } .bb__item--stat-total .bb__stat-num { color: #3E2723; font-size: 2rem; } .bb__stat-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.9); } .bb__item--stat-total .bb__stat-label { color: #3E2723; font-size: 0.75rem; } /* -------------------------------------------------------------------------- 15b. BENTO RESPONSIVE -------------------------------------------------------------------------- */ @media (max-width: 768px) { .story-timeline { padding-top: 5rem; } .story-timeline__track { padding-left: 0.75rem; padding-right: 0.75rem; gap: 0.6rem; } .story-ring { width: 66px; height: 66px; } .story-ring__thumb { width: 58px; height: 58px; } .story-timeline__hint { right: 0.75rem; font-size: 0.55rem; } .story-timeline__label span { font-size: 0.5rem; } .bento { grid-template-columns: 1fr; gap: 0.75rem; } .bento__cell--hero-video { grid-column: span 1; aspect-ratio: 16 / 9; } .bento__cell--hero-blog { min-height: auto; aspect-ratio: 4 / 3; } .bento__overlay-title { font-size: 1.1rem; } .bento__play { opacity: 1; } .story-viewer__media { max-width: 100%; border-radius: 0; } .story-viewer__nav { width: 30%; } /* Bento box — stacked */ .bento-box { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 1rem; padding-top: 1.5rem; } .bb__item--2x2, .bb__item--wide, .bb__item--tall { grid-column: span 1; grid-row: span 1; } .bb__item { min-height: 200px; border-radius: 22px; } .bb__item--video { aspect-ratio: 16 / 9; min-height: auto; } .bb__item--stat { min-height: 140px; } .bb__play { opacity: 1; } .bb__title { font-size: 1.1rem !important; -webkit-line-clamp: 3 !important; } } @media (min-width: 769px) and (max-width: 1024px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento__cell--hero-video { grid-column: span 2; } .bento__cell--hero-blog { grid-column: span 2; min-height: auto; } /* Bento box — 3-col */ .bento-box { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 180px; gap: 1.25rem; } .bb__item--2x2 { grid-column: span 2; grid-row: span 2; } .bb__item--wide { grid-column: span 2; } .bb__item--tall { grid-row: span 2; } } .story-ring { flex-shrink: 0; position: relative; width: 76px; height: 76px; border-radius: 50%; padding: 0; border: none; background: transparent; cursor: pointer; scroll-snap-align: center; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .story-ring:hover { transform: scale(1.1); } .story-ring:active { transform: scale(0.95); } /* Gradient ring */ .story-ring__gradient { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient( from 0deg, #FF6B9D, #FFB347, #77DD77, #6BB5FF, #FF6B9D ); animation: ring-spin 6s linear infinite; } @keyframes ring-spin { to { transform: rotate(360deg); } } /* White gap between ring and thumb */ .story-ring__gradient::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--color-bg); transition: background 0.4s ease; } .story-ring__thumb { position: relative; z-index: 1; width: 68px; height: 68px; border-radius: 50%; object-fit: cover; margin: 4px; pointer-events: none; } /* -------------------------------------------------------------------------- 16. STORY VIEWER — Fullscreen overlay with progress bars -------------------------------------------------------------------------- */ .story-viewer { position: fixed; inset: 0; z-index: 10000; background: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .story-viewer.active { opacity: 1; visibility: visible; } /* Progress bars at top */ .story-viewer__progress { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; gap: 4px; z-index: 3; } .story-viewer__bar { flex: 1; height: 3px; background: rgba(255, 255, 255, 0.25); border-radius: 3px; overflow: hidden; } .story-viewer__bar span { display: block; height: 100%; width: 0; background: #fff; border-radius: 3px; transition: none; } .story-viewer__bar.watched span { width: 100%; } .story-viewer__bar.active span { width: 0; animation: story-progress 5s linear forwards; } @keyframes story-progress { to { width: 100%; } } /* Close button */ .story-viewer__close { position: absolute; top: 28px; right: 20px; z-index: 4; background: none; border: none; color: #fff; font-size: 2rem; cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.2s ease; line-height: 1; } .story-viewer__close:hover { background: rgba(255, 255, 255, 0.12); } /* Media container */ .story-viewer__media { position: relative; z-index: 1; max-width: 440px; max-height: 85vh; width: 100%; border-radius: 16px; overflow: hidden; background: #000; } .story-viewer__media img, .story-viewer__media video { width: 100%; height: auto; max-height: 85vh; object-fit: contain; display: block; } /* Prev / Next invisible tap zones */ .story-viewer__nav { position: absolute; top: 0; bottom: 0; width: 40%; z-index: 2; background: transparent; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .story-viewer__nav--prev { left: 0; } /* ═══════════════════════════════════════════════════════════════════ BLOG POST — Article Reading View ═══════════════════════════════════════════════════════════════════ */ /* Narrow container for article text */ .container--narrow { max-width: 720px; } /* ── Post header ─────────────────────────────────────────────────── */ .post__header { padding: 3rem 0 1.5rem; text-align: center; } /* Old-post warning banner */ .post-old-banner { padding: 1rem 0; } .post-old-banner__text { margin: 0; padding: 1rem 1.25rem; background: rgba(var(--color-primary-rgb), 0.10); border: 1px solid rgba(var(--color-primary-rgb), 0.25); border-left: 4px solid var(--color-primary); border-radius: var(--radius-sm); font-size: 0.92rem; line-height: 1.6; color: var(--color-text); } .post__meta { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 1rem; font-size: 0.875rem; } .post__category { display: inline-block; padding: 0.25rem 0.75rem; background: var(--pill-bg, rgba(255, 179, 71, 0.15)); color: var(--color-link); border-radius: var(--radius-pill); font-weight: 600; text-decoration: none; transition: background 0.2s; } .post__category:hover { background: var(--pill-active-bg, rgba(255, 179, 71, 0.25)); } .post__date { color: var(--color-text-muted); } .post__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: clamp(1.75rem, 5vw, 2.75rem); line-height: 1.2; color: var(--color-text); margin: 0 0 1rem; } .post__lead { font-size: 1.15rem; line-height: 1.6; color: var(--color-text-muted); max-width: 600px; margin: 0 auto; } /* ── Cover image ─────────────────────────────────────────────────── */ .post__cover { margin-bottom: 2.5rem; } .post__cover-figure { margin: 0; border-radius: var(--radius-card, 24px); overflow: hidden; max-width: 700px; margin: 0 auto; box-shadow: var(--card-shadow); } .post__cover-figure img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; } /* ── Article body ────────────────────────────────────────────────── */ .post__body { padding-bottom: 3rem; } /* Prose: typography for ai_html content */ .post__content.prose { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.75; color: var(--color-text); } .post__content.prose > article { display: contents; } .post__content.prose h4, .post__content.prose h3, .post__content.prose h2 { font-family: var(--font-heading); font-weight: var(--font-weight-heading); line-height: 1.3; color: var(--color-text); margin: 2rem 0 0.75rem; } .post__content.prose h2 { font-size: 1.6rem; } .post__content.prose h3 { font-size: 1.35rem; } .post__content.prose h4 { font-size: 1.2rem; } .post__content.prose p { margin: 0 0 1.25rem; } .post__content.prose a { color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s; } .post__content.prose a:hover { color: var(--color-link-hover); } .post__content.prose blockquote { margin: 1.5rem 0; padding: 1rem 1.5rem; border-left: 4px solid var(--color-primary); background: var(--color-surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-style: italic; color: var(--color-text-muted); } .post__content.prose blockquote p { margin-bottom: 0; } .post__content.prose img { max-width: 100%; height: auto; border-radius: var(--radius-sm); } .post__content.prose video { max-width: 100%; max-height: 600px; border-radius: var(--radius-sm); display: block; margin: 1.5rem auto; } .post__content.prose figure { margin: 1.5rem 0; } /* Support for the ai_html gallery grid classes (row/col-*) */ .post__content.prose .row { display: flex; flex-wrap: wrap; gap: 0.5rem; } .post__content.prose .row > [class*="col-"] { flex: 1 1 0; min-width: 0; } .post__content.prose .col-4 { flex: 0 0 calc(33.333% - 0.34rem); } .post__content.prose .col-6 { flex: 0 0 calc(50% - 0.25rem); } .post__content.prose .col-12 { flex: 0 0 100%; } .post__content.prose .figure-holder { overflow: hidden; border-radius: var(--radius-sm); } .post__content.prose .figure-holder img { display: block; width: 100%; height: auto; } /* Neutralize old-system classes that add nothing */ .post__content.prose .embed-content, .post__content.prose .embed-responsive, .post__content.prose .box-border-dark-1, .post__content.prose .transition-default, .post__content.prose .radius-default, .post__content.prose .radius-medium, .post__content.prose .g-2, .post__content.prose .mb-3 { all: unset; display: block; } .post__content.prose .row.g-2 { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* ── Original caption (collapsible) ──────────────────────────────── */ .post__original { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--card-border); } .post__original summary { cursor: pointer; font-weight: 600; color: var(--color-text-muted); font-size: 0.9rem; } .post__original p { margin-top: 0.75rem; font-size: 0.9rem; line-height: 1.7; color: var(--color-text-muted); } /* ── Tag Cloud ───────────────────────────────────────────────────── */ .post__tags { padding: 0.5rem 0 2rem; } .tag-cloud { display: flex; flex-wrap: wrap; gap: 0.5rem; } .tag-cloud__tag { display: inline-block; padding: 0.3rem 0.8rem; background: var(--color-surface); border: 1px solid var(--card-border); border-radius: var(--radius-pill); font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); transition: background 0.2s, color 0.2s; } .tag-cloud__tag:hover { background: var(--pill-bg); color: var(--color-text); } /* ── Comments ────────────────────────────────────────────────────── */ .comments { padding: 2rem 0 4rem; } .comments__heading { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.3rem; color: var(--color-text); margin: 0 0 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--card-border); } .comments__instagram-cta { font-size: 0.95rem; color: var(--color-text-muted); margin: 0 0 1.5rem; } .comments__instagram-cta a { color: var(--color-primary); font-weight: 600; text-decoration: none; } .comments__instagram-cta a:hover { text-decoration: underline; } .comments__list { list-style: none; margin: 0; padding: 0; } .comment { margin-bottom: 1.25rem; } .comment__main { display: flex; gap: 0.75rem; align-items: flex-start; } .comment__avatar { flex-shrink: 0; } .comment__avatar img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; background: var(--color-surface); } .comment--reply .comment__avatar img { width: 64px; height: 64px; } .comment__bubble { flex: 1; min-width: 0; background: var(--color-surface); border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: 0.65rem 0.9rem; } .comment__header { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.25rem; } .comment__author { font-weight: 700; font-size: 0.85rem; color: var(--color-text); } .comment__date { font-size: 0.75rem; color: var(--color-text-muted); } .comment__text { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--color-text); word-break: break-word; } .comment__reply-to { font-weight: 600; color: var(--color-link); } /* Nested replies */ .comment__replies { list-style: none; margin: 0.5rem 0 0 3.25rem; padding: 0; border-left: 2px solid var(--card-border); padding-left: 0.75rem; } .comment__replies .comment { margin-bottom: 0.75rem; } @media (max-width: 600px) { .comment__replies { margin-left: 1.5rem; } } /* ── 404 ─────────────────────────────────────────────────────────── */ .post-404 { text-align: center; padding: 6rem 0; } .post-404 h1 { font-family: var(--font-heading); font-size: 5rem; font-weight: var(--font-weight-heading); color: var(--color-primary); margin: 0 0 0.5rem; } .post-404 p { font-size: 1.15rem; color: var(--color-text-muted); margin-bottom: 1.5rem; } .post-404 a { display: inline-block; padding: 0.6rem 1.5rem; background: var(--color-primary); color: #fff; border-radius: var(--radius-pill); text-decoration: none; font-weight: 600; transition: opacity 0.2s; } .post-404 a:hover { opacity: 0.85; } /* ═══════════════════════════════════════════════════════════════════ RELATED POSTS — Bottom of article ═══════════════════════════════════════════════════════════════════ */ .related { padding: 2rem 0 4rem; } .related__heading { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.4rem; color: var(--color-text); margin: 0 0 1.5rem; } .related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; } .related__card { display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-card); overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--card-shadow); transition: transform 0.25s, box-shadow 0.25s; } .related__card:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); } .related__img-wrap { aspect-ratio: 1 / 1; overflow: hidden; } .related__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; } .related__card:hover .related__img-wrap img { transform: scale(1.05); } .related__text { padding: 0.75rem 1rem 1rem; } .related__cat { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-link); margin-bottom: 0.25rem; } .related__title { font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; line-height: 1.35; color: var(--color-text); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ═══════════════════════════════════════════════════════════════════ BLOG LISTING — Grid of all posts ═══════════════════════════════════════════════════════════════════ */ .blog-hero { padding: 3rem 0 1rem; text-align: center; } .blog-hero__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: clamp(2rem, 5vw, 3rem); color: var(--color-text); margin: 0 0 0.5rem; } .blog-hero__desc { font-size: 1.1rem; color: var(--color-text-muted); max-width: 500px; margin: 0 auto; } /* Category filter bar */ .blog-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; padding: 1.5rem 0 2rem; } .blog-filters__btn { display: inline-block; padding: 0.35rem 0.9rem; border-radius: var(--radius-pill); font-size: 0.85rem; font-weight: 600; text-decoration: none; color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--card-border); transition: background 0.2s, color 0.2s; } .blog-filters__btn:hover { color: var(--color-text); background: var(--pill-bg); } .blog-filters__btn--active { background: var(--pill-active-bg); color: var(--color-link); border-color: var(--color-primary); } /* Blog card grid */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; padding-bottom: 3rem; } .blog-card { display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-card); overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--card-shadow); transition: transform 0.25s, box-shadow 0.25s; } .blog-card:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); } .blog-card__img { aspect-ratio: 4 / 3; overflow: hidden; } .blog-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; } .blog-card:hover .blog-card__img img { transform: scale(1.05); } .blog-card__body { padding: 1rem 1.25rem 1.25rem; flex: 1; display: flex; flex-direction: column; } .blog-card__cat { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-link); margin-bottom: 0.35rem; } .blog-card__title { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; line-height: 1.35; color: var(--color-text); margin: 0 0 0.4rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .blog-card__excerpt { font-size: 0.875rem; line-height: 1.55; color: var(--color-text-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; } .blog-card__date { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 0.75rem; opacity: 0.7; } /* Load more button */ .blog-load-more { text-align: center; padding: 1rem 0 4rem; } .blog-load-more__btn { display: inline-block; padding: 0.65rem 2rem; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--card-border); border-radius: var(--radius-pill); font-weight: 600; font-size: 0.95rem; text-decoration: none; cursor: pointer; transition: background 0.2s, transform 0.15s; } .blog-load-more__btn:hover { background: var(--pill-bg); transform: translateY(-2px); } /* ========================================================================== VIDEO PAGES (videoer.php / gaming.php) ========================================================================== */ /* ── Hero ─────────────────────────────────────────────────────── */ .vid-hero { padding: 3rem 0 1.5rem; text-align: center; } .vid-hero__channel { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .vid-hero__avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--card-border); box-shadow: var(--card-shadow); } .vid-hero__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: clamp(2rem, 5vw, 3rem); color: var(--color-text); margin: 0; } .vid-hero__desc { font-size: 1.05rem; color: var(--color-text-muted); margin: 0.25rem 0 0; } .vid-hero__stats { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; } .vid-hero__stat { font-size: 0.9rem; color: var(--color-text-muted); } .vid-hero__stat strong { display: block; font-size: 1.3rem; color: var(--color-text); font-weight: 700; } /* ── Top two videos (side-by-side) ───────────────────────────── */ .vid-top { padding-bottom: 1.5rem; } .vid-top__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .vid-card--top .vid-card__title { font-size: 1.1rem; } /* ── Video grid (3 columns) ──────────────────────────────────── */ .vid-grid-section { padding-bottom: 3rem; } .vid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .vid-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--card-shadow); transition: transform 0.25s, box-shadow 0.25s; } .vid-card:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); } .vid-card__thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; } .vid-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; } .vid-card:hover .vid-card__thumb img { transform: scale(1.05); } .vid-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; } .vid-card:hover .vid-card__play { opacity: 1; } .vid-card__duration { position: absolute; bottom: 0.5rem; right: 0.5rem; background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 0.7rem; font-weight: 600; padding: 0.12rem 0.4rem; border-radius: 4px; } .vid-card__body { padding: 0.85rem 1rem 1rem; flex: 1; display: flex; flex-direction: column; } .vid-card__title { font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; line-height: 1.35; color: var(--color-text); margin: 0 0 0.35rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vid-card__meta { font-size: 0.78rem; color: var(--color-text-muted); margin-top: auto; } /* ── Subscribe CTA ───────────────────────────────────────────── */ .vid-cta { padding: 1rem 0 4rem; } .vid-cta__box { text-align: center; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-card); padding: 2.5rem 2rem; box-shadow: var(--card-shadow); } .vid-cta__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.5rem; color: var(--color-text); margin: 0 0 0.4rem; } .vid-cta__desc { color: var(--color-text-muted); margin: 0 0 1.25rem; font-size: 1rem; } .vid-cta__btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.6rem; background: #ff0000; color: #fff; font-weight: 700; font-size: 0.95rem; border: none; border-radius: var(--radius-pill); text-decoration: none; cursor: pointer; transition: background 0.2s, transform 0.15s; } .vid-cta__btn:hover { background: #cc0000; transform: translateY(-2px); } /* ========================================================================== KREATIV PAGE — Liquid Glass Hub ========================================================================== */ .kreativ-hero { padding: 3rem 0 1rem; text-align: center; } .kreativ-hero__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: clamp(2.2rem, 6vw, 3.5rem); color: var(--color-text); margin: 0 0 0.5rem; } .kreativ-hero__desc { font-size: 1.1rem; color: var(--color-text-muted); max-width: 480px; margin: 0 auto; } /* ── Grid: 2 + 3 staggered layout ───────────────────────────────── */ .kreativ-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; padding: 2rem 0 4rem; } /* Last item (5th) spans full width for a nice centered finish */ .kreativ-grid .kreativ-card:nth-child(4), .kreativ-grid .kreativ-card:nth-child(5) { /* nothing — they sit in the 2-col grid naturally */ } /* On wider screens, switch to 3-col for bottom row */ @media (min-width: 768px) { .kreativ-grid { grid-template-columns: repeat(3, 1fr); } } /* ── Card ────────────────────────────────────────────────────────── */ .kreativ-card { --card-accent: #FFB347; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: inherit; padding: 2.5rem 1.5rem 2rem; border-radius: var(--radius-card); background: var(--glass-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); overflow: hidden; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, border-color 0.3s ease; animation: kreativFadeIn 0.5s ease both; animation-delay: var(--card-delay, 0s); } @keyframes kreativFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .kreativ-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: var(--card-shadow-hover), 0 0 40px color-mix(in srgb, var(--card-accent) 20%, transparent); border-color: color-mix(in srgb, var(--card-accent) 40%, var(--card-border)); } /* Glow blob (accent-colored, hidden until hover) */ .kreativ-card__glow { position: absolute; top: -40%; left: 50%; transform: translateX(-50%); width: 120%; height: 80%; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--card-accent) 18%, transparent), transparent 70%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; z-index: 0; } .kreativ-card:hover .kreativ-card__glow { opacity: 1; } /* Icon */ .kreativ-card__icon { position: relative; z-index: 1; font-size: 3rem; line-height: 1; margin-bottom: 1rem; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .kreativ-card:hover .kreativ-card__icon { transform: scale(1.2) rotate(-6deg); } /* Title */ .kreativ-card__title { position: relative; z-index: 1; font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.25rem; color: var(--color-text); margin: 0 0 0.4rem; } /* Description */ .kreativ-card__desc { position: relative; z-index: 1; font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.5; margin: 0 0 1rem; max-width: 260px; } /* Arrow indicator */ .kreativ-card__arrow { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--card-accent) 15%, transparent); color: var(--card-accent); font-size: 1.1rem; font-weight: 700; transition: background 0.3s, transform 0.3s; margin-top: auto; } .kreativ-card:hover .kreativ-card__arrow { background: color-mix(in srgb, var(--card-accent) 30%, transparent); transform: translateX(4px); } .kreativ-card:hover .kreativ-card__arrow { background: color-mix(in srgb, var(--card-accent) 30%, transparent); transform: translateX(4px); } /* ═══════════════════════════════════════════════════════════════════ OM — About hub & sub-pages ═══════════════════════════════════════════════════════════════════ */ /* ── Hub hero ────────────────────────────────────────────────────── */ .om-hero { padding: 3rem 0 1rem; text-align: center; } .om-hero__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: clamp(2.2rem, 6vw, 3.5rem); color: var(--color-text); margin: 0 0 0.5rem; } .om-hero__desc { font-size: 1.1rem; color: var(--color-text-muted); max-width: 520px; margin: 0 auto; } /* ── Hub grid ────────────────────────────────────────────────────── */ .om-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; padding: 2rem 0 4rem; } @media (min-width: 768px) { .om-grid { grid-template-columns: repeat(2, 1fr); } } /* ── Hub card (same pattern as kreativ) ──────────────────────────── */ .om-card { --card-accent: #FFB347; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: inherit; padding: 2.5rem 1.5rem 2rem; border-radius: var(--radius-card); background: var(--glass-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); overflow: hidden; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, border-color 0.3s ease; animation: omFadeIn 0.5s ease both; animation-delay: var(--card-delay, 0s); } @keyframes omFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .om-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: var(--card-shadow-hover), 0 0 40px color-mix(in srgb, var(--card-accent) 20%, transparent); border-color: color-mix(in srgb, var(--card-accent) 40%, var(--card-border)); } .om-card__glow { position: absolute; top: -40%; left: 50%; transform: translateX(-50%); width: 120%; height: 80%; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--card-accent) 18%, transparent), transparent 70%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; z-index: 0; } .om-card:hover .om-card__glow { opacity: 1; } .om-card__icon { position: relative; z-index: 1; font-size: 3rem; line-height: 1; margin-bottom: 1rem; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .om-card:hover .om-card__icon { transform: scale(1.2) rotate(-6deg); } .om-card__title { position: relative; z-index: 1; font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.25rem; color: var(--color-text); margin: 0 0 0.4rem; } .om-card__desc { position: relative; z-index: 1; font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.5; margin: 0 0 1rem; max-width: 260px; } .om-card__arrow { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--card-accent) 15%, transparent); color: var(--card-accent); font-size: 1.1rem; font-weight: 700; transition: background 0.3s, transform 0.3s; margin-top: auto; } .om-card:hover .om-card__arrow { background: color-mix(in srgb, var(--card-accent) 30%, transparent); transform: translateX(4px); } /* ── Sub-page hero ───────────────────────────────────────────────── */ .om-sub-hero { padding: 3rem 0 1.5rem; text-align: center; } .om-sub-hero__back { display: inline-block; font-size: 0.85rem; color: var(--color-text-muted); text-decoration: none; margin-bottom: 1.5rem; transition: color 0.2s; } .om-sub-hero__back:hover { color: var(--color-primary); } .om-sub-hero__icon { font-size: 3.5rem; line-height: 1; margin-bottom: 0.75rem; } .om-sub-hero__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: clamp(2rem, 5.5vw, 3rem); color: var(--color-text); margin: 0 0 0.5rem; } .om-sub-hero__subtitle { font-size: 1.05rem; color: var(--color-text-muted); max-width: 480px; margin: 0 auto; } /* ── Shared prose block ──────────────────────────────────────────── */ .om-content { padding: 0 0 4rem; } .om-prose { font-size: 1.05rem; line-height: 1.8; color: var(--color-text-muted); margin-bottom: 2.5rem; } .om-prose p { margin: 0 0 1.25rem; } .om-prose a { color: var(--color-primary); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--color-primary) 30%, transparent); text-underline-offset: 2px; transition: text-decoration-color 0.2s ease; } .om-prose a:hover { text-decoration-color: var(--color-primary); } /* ── Portrait hero (hvem-er-jeg) ─────────────────────────────── */ .hej-portrait { margin: 0 auto 1.25rem; width: 160px; height: 160px; border-radius: 50%; overflow: hidden; border: 3px solid var(--card-border); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } .hej-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── Photo gallery (hvem-er-jeg) ──────────────────────────── */ .hej-gallery { margin-bottom: 2.5rem; } .hej-gallery__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.3rem; color: var(--color-text); text-align: center; margin: 0 0 1.25rem; } .hej-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; } .hej-gallery__item { border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--card-border); aspect-ratio: 1; animation: omFadeIn 0.4s ease both; animation-delay: var(--hej-delay, 0s); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease; } .hej-gallery__item:hover { transform: translateY(-4px) scale(1.02); box-shadow: var(--card-shadow-hover); } .hej-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── Social CTA (hvem-er-jeg) ─────────────────────────────── */ .hej-social-cta { text-align: center; margin-top: 2rem; } .hej-social-cta__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.2rem; color: var(--color-text); margin: 0 0 1rem; } .hej-social-cta__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.75rem; } .hej-social-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.65rem 1.25rem; border-radius: 999px; font-weight: 600; font-size: 0.95rem; text-decoration: none; color: var(--color-text); background: color-mix(in srgb, var(--btn-color) 12%, var(--glass-bg)); border: 1px solid color-mix(in srgb, var(--btn-color) 30%, var(--card-border)); transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.3s ease; } .hej-social-btn:hover { transform: translateY(-3px); background: color-mix(in srgb, var(--btn-color) 20%, var(--glass-bg)); box-shadow: 0 6px 20px color-mix(in srgb, var(--btn-color) 20%, transparent); } /* ── Fun facts grid (hvem-er-jeg) ────────────────────────────────── */ .om-funfacts__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.3rem; color: var(--color-text); text-align: center; margin: 0 0 1.25rem; } .om-funfacts__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1rem; } .om-funfact { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-radius: var(--radius-card); background: var(--glass-bg); border: 1px solid var(--card-border); transition: transform 0.3s ease, box-shadow 0.3s ease; } .om-funfact:hover { transform: translateY(-3px); box-shadow: 0 8px 24px color-mix(in srgb, var(--ff-accent) 15%, transparent); } .om-funfact__emoji { font-size: 1.6rem; line-height: 1; flex-shrink: 0; } .om-funfact__label { font-size: 0.95rem; color: var(--color-text); font-weight: 500; } /* ── Timeline (girafpingvin story) ───────────────────────────────── */ .om-timeline__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.3rem; color: var(--color-text); text-align: center; margin: 0 0 1.5rem; } .om-timeline__list { position: relative; padding-left: 2rem; } .om-timeline__list::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: var(--card-border); } .om-timeline__item { position: relative; margin-bottom: 1.5rem; } .om-timeline__item:last-child { margin-bottom: 0; } .om-timeline__dot { position: absolute; left: -2rem; top: 1rem; width: 16px; height: 16px; border-radius: 50%; background: var(--tl-accent, var(--color-primary)); border: 3px solid var(--color-bg); box-shadow: 0 0 0 2px var(--tl-accent, var(--color-primary)); transform: translateX(calc(-50% + 8px)); } .om-timeline__card { background: var(--glass-bg); border: 1px solid var(--card-border); border-radius: var(--radius-card); padding: 1rem 1.25rem; } .om-timeline__card strong { display: block; font-size: 1rem; color: var(--color-text); margin-bottom: 0.25rem; } .om-timeline__card p { font-size: 0.9rem; color: var(--color-text-muted); margin: 0; line-height: 1.5; } /* ── Contact card (kontakt) ──────────────────────────────────────── */ .kontakt-card { text-align: center; padding: 2.5rem 2rem; border-radius: var(--radius-card); background: var(--glass-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); margin-bottom: 2rem; } .kontakt-card__icon { font-size: 2.5rem; line-height: 1; margin-bottom: 0.75rem; } .kontakt-card__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.3rem; color: var(--color-text); margin: 0 0 0.5rem; } .kontakt-card__desc { font-size: 0.95rem; color: var(--color-text-muted); line-height: 1.7; max-width: 460px; margin: 0 auto 1.25rem; } .kontakt-card__btn { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.5rem; border-radius: 999px; background: linear-gradient(135deg, rgba(108, 180, 238, 0.15), rgba(108, 180, 238, 0.05)); border: 1px solid rgba(108, 180, 238, 0.35); color: var(--color-text); font-weight: 600; font-size: 1rem; text-decoration: none; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease; } .kontakt-card__btn:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 8px 28px rgba(108, 180, 238, 0.2); border-color: rgba(108, 180, 238, 0.55); } .kontakt-card__btn-arrow { font-weight: 700; transition: transform 0.3s; } .kontakt-card__btn:hover .kontakt-card__btn-arrow { transform: translateX(4px); } /* DM card variant */ .kontakt-card--dm { margin-bottom: 2rem; } .kontakt-card__dm-links { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } .kontakt-card__btn--insta { background: linear-gradient(135deg, rgba(225, 48, 108, 0.15), rgba(225, 48, 108, 0.05)); border-color: rgba(225, 48, 108, 0.35); } .kontakt-card__btn--insta:hover { box-shadow: 0 8px 28px rgba(225, 48, 108, 0.2); border-color: rgba(225, 48, 108, 0.55); } .kontakt-card__btn--snap { background: linear-gradient(135deg, rgba(255, 252, 0, 0.15), rgba(255, 252, 0, 0.05)); border-color: rgba(255, 252, 0, 0.35); } .kontakt-card__btn--snap:hover { box-shadow: 0 8px 28px rgba(255, 252, 0, 0.2); border-color: rgba(255, 252, 0, 0.55); } /* ── Social links grid ───────────────────────────────────────────── */ .kontakt-socials { margin-bottom: 2rem; } .kontakt-socials__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.2rem; color: var(--color-text); text-align: center; margin: 0 0 1.25rem; } .kontakt-socials__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 1rem; } .kontakt-social { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: inherit; padding: 1.5rem 1rem; border-radius: var(--radius-card); background: var(--glass-bg); border: 1px solid var(--card-border); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.3s ease; animation: omFadeIn 0.4s ease both; animation-delay: var(--social-delay, 0s); } .kontakt-social:hover { transform: translateY(-6px) scale(1.03); box-shadow: var(--card-shadow-hover), 0 0 30px color-mix(in srgb, var(--social-accent) 18%, transparent); border-color: color-mix(in srgb, var(--social-accent) 40%, var(--card-border)); } .kontakt-social__icon { font-size: 2rem; line-height: 1; margin-bottom: 0.5rem; } .kontakt-social__name { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1rem; color: var(--color-text); } .kontakt-social__handle { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.15rem; } /* ── Tip note ────────────────────────────────────────────────────── */ .kontakt-note { background: var(--glass-bg); border: 1px solid var(--card-border); border-radius: var(--radius-card); padding: 1rem 1.5rem; text-align: center; } .kontakt-note__text { font-size: 0.9rem; color: var(--color-text-muted); margin: 0; line-height: 1.6; } /* ═══════════════════════════════════════════════════════════════════ SOCIALE MEDIER PAGE — Link‑card list grouped by category ═══════════════════════════════════════════════════════════════════ */ .some-section { margin-bottom: 2.25rem; } .some-section__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.15rem; color: var(--color-text); margin: 0 0 0.85rem; display: flex; align-items: center; gap: 0.5rem; } .some-section__title-icon { flex-shrink: 0; } .some-links { display: flex; flex-direction: column; gap: 0.65rem; } .some-link { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: inherit; padding: 1rem 1.25rem; border-radius: var(--radius-card); background: var(--glass-bg); border: 1px solid var(--card-border); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.3s ease; animation: omFadeIn 0.4s ease both; animation-delay: var(--some-delay, 0s); } .some-link:hover { transform: translateY(-4px) scale(1.015); box-shadow: var(--card-shadow-hover), 0 0 30px color-mix(in srgb, var(--some-accent) 18%, transparent); border-color: color-mix(in srgb, var(--some-accent) 40%, var(--card-border)); } .some-link__icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: color-mix(in srgb, var(--some-accent) 14%, transparent); color: var(--some-accent); transition: background 0.3s ease; } .some-link:hover .some-link__icon { background: color-mix(in srgb, var(--some-accent) 22%, transparent); } .some-link__info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .some-link__name { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1rem; color: var(--color-text); } .some-link__handle { font-size: 0.8rem; color: var(--color-text-muted); } .some-link__arrow { margin-left: auto; font-size: 1.6rem; color: var(--color-text-muted); flex-shrink: 0; transition: transform 0.25s ease; } .some-link:hover .some-link__arrow { transform: translateX(4px); color: var(--some-accent); } /* ═══════════════════════════════════════════════════════════════════ PRESSE PAGE — Press kit with downloads ═══════════════════════════════════════════════════════════════════ */ .presse-intro { text-align: center; margin-bottom: 2.5rem; } .presse-section-title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.25rem; color: var(--color-text); margin: 0 0 1.25rem; } /* ── Facts grid ─────────────────────────────────────────────────── */ .presse-facts { margin-bottom: 2.5rem; } .presse-facts__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0.75rem; } .presse-fact { display: flex; flex-direction: column; gap: 0.15rem; padding: 1rem 1.25rem; border-radius: var(--radius-card); background: var(--glass-bg); border: 1px solid var(--card-border); } .presse-fact__label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); font-weight: 600; } .presse-fact__value { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 0.95rem; color: var(--color-text); word-break: break-word; } /* ── Asset card (logo / photo) ────────────────────────────────── */ .presse-assets { margin-bottom: 2.5rem; } .presse-asset { display: flex; gap: 1.5rem; align-items: flex-start; padding: 1.5rem; border-radius: var(--radius-card); background: var(--glass-bg); border: 1px solid var(--card-border); margin-bottom: 1rem; animation: omFadeIn 0.4s ease both; animation-delay: var(--presse-delay, 0s); transition: box-shadow 0.35s ease, border-color 0.3s ease; } .presse-asset:hover { box-shadow: var(--card-shadow-hover), 0 0 30px color-mix(in srgb, var(--presse-accent) 15%, transparent); border-color: color-mix(in srgb, var(--presse-accent) 30%, var(--card-border)); } .presse-asset__preview { flex-shrink: 0; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: color-mix(in srgb, var(--presse-accent) 8%, var(--glass-bg)); overflow: hidden; } .presse-asset__preview img { max-width: 100%; max-height: 100%; object-fit: contain; } .presse-asset__preview--photo { border-radius: 14px; } .presse-asset__preview--photo img { object-fit: cover; width: 100%; height: 100%; } .presse-asset__info { flex: 1; min-width: 0; } .presse-asset__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.1rem; color: var(--color-text); margin: 0 0 0.35rem; } .presse-asset__desc { font-size: 0.85rem; color: var(--color-text-muted); margin: 0 0 0.85rem; line-height: 1.5; } .presse-asset__downloads { display: flex; flex-wrap: wrap; gap: 0.5rem; } .presse-dl { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 600; color: var(--color-text); text-decoration: none; padding: 0.4rem 0.75rem; border-radius: 8px; background: color-mix(in srgb, var(--presse-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--presse-accent) 25%, transparent); transition: background 0.25s ease, transform 0.2s ease; } .presse-dl:hover { background: color-mix(in srgb, var(--presse-accent) 22%, transparent); transform: translateY(-2px); } .presse-dl svg { flex-shrink: 0; opacity: 0.7; } .presse-assets__intro { font-size: 0.9rem; color: var(--color-text-muted); margin: -0.5rem 0 1.25rem; line-height: 1.5; } /* Presse image grid (photos, characters, wallpapers) */ .presse-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem; } .presse-grid--characters { grid-template-columns: repeat(4, 1fr); } .presse-grid--wallpapers { grid-template-columns: repeat(3, 1fr); } .presse-grid__item { background: var(--glass-bg); border: 1px solid var(--card-border); border-radius: var(--radius-card); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; align-items: center; transition: transform 0.2s, box-shadow 0.2s; position: relative; } .presse-grid__item:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); } .presse-grid__img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; } .presse-grid__img--contain { object-fit: contain; padding: 0.75rem; } .presse-grid__img--cover { aspect-ratio: 16 / 10; object-fit: cover; } .presse-grid__item--wallpaper { border-color: color-mix(in srgb, var(--presse-accent, var(--color-primary)) 25%, var(--card-border)); } .presse-grid__label { font-size: 0.75rem; color: var(--color-text-muted); padding: 0.25rem 0.6rem 0; text-align: center; line-height: 1.3; } .presse-grid__dl { font-size: 0.7rem; font-weight: 600; color: var(--color-primary); padding: 0.25rem 0.6rem 0.6rem; text-align: center; opacity: 0; transition: opacity 0.2s; } .presse-grid__item:hover .presse-grid__dl { opacity: 1; } /* ── Om mobile ───────────────────────────────────────────────────── */ @media (max-width: 600px) { .om-grid { grid-template-columns: 1fr; } .om-sub-hero__icon { font-size: 2.8rem; } .om-funfacts__grid { grid-template-columns: 1fr; } .kontakt-socials__grid { grid-template-columns: 1fr; } .some-link { padding: 0.85rem 1rem; gap: 0.75rem; } .some-link__icon { width: 38px; height: 38px; border-radius: 10px; } .presse-asset { flex-direction: column; align-items: center; text-align: center; } .presse-asset__preview { width: 100px; height: 100px; } .presse-asset__downloads { justify-content: center; } .presse-facts__grid { grid-template-columns: 1fr; } .presse-grid { grid-template-columns: repeat(2, 1fr); } .presse-grid--characters { grid-template-columns: repeat(3, 1fr); } .presse-grid--wallpapers { grid-template-columns: repeat(2, 1fr); } .hej-portrait { width: 120px; height: 120px; } .hej-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; } .hej-social-cta__links { flex-direction: column; align-items: center; } } /* ═══════════════════════════════════════════════════════════════════ MUSIK PAGE — Release cards with liquid glass design ═══════════════════════════════════════════════════════════════════ */ /* ── Hero ───────────────────────────────────────────────────────── */ .musik-hero { padding: 3rem 0 1.5rem; text-align: center; } .musik-hero__back { display: inline-block; font-size: 0.85rem; color: var(--color-text-muted); text-decoration: none; margin-bottom: 1.5rem; transition: color 0.2s; } .musik-hero__back:hover { color: var(--color-primary); } .musik-hero__icon { font-size: 3.5rem; line-height: 1; margin-bottom: 0.75rem; animation: musikBounce 2s ease-in-out infinite; } @keyframes musikBounce { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-6px) rotate(-4deg); } 75% { transform: translateY(-3px) rotate(4deg); } } .musik-hero__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: clamp(2.2rem, 6vw, 3.5rem); color: var(--color-text); margin: 0 0 0.5rem; } .musik-hero__desc { font-size: 1.1rem; color: var(--color-text-muted); max-width: 520px; margin: 0 auto; line-height: 1.6; } /* ── Release cards ──────────────────────────────────────────────── */ .musik-releases { padding: 0 0 2rem; } .musik-release { --release-accent: #1DB954; position: relative; display: grid; grid-template-columns: 220px 1fr; gap: 2rem; align-items: start; padding: 2rem; margin-bottom: 2rem; border-radius: var(--radius-card); background: var(--glass-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); overflow: hidden; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, border-color 0.3s ease; animation: musikFadeIn 0.6s ease both; animation-delay: var(--release-delay, 0s); } @keyframes musikFadeIn { from { opacity: 0; transform: translateY(30px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .musik-release:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover), 0 0 60px color-mix(in srgb, var(--release-accent) 15%, transparent); border-color: color-mix(in srgb, var(--release-accent) 35%, var(--card-border)); } /* Glow blob */ .musik-release__glow { position: absolute; top: -50%; right: -20%; width: 60%; height: 120%; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--release-accent) 12%, transparent), transparent 70%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; z-index: 0; } .musik-release:hover .musik-release__glow { opacity: 1; } /* Cover art */ .musik-release__cover { position: relative; z-index: 1; } .musik-release__cover img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm, 12px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; } .musik-release:hover .musik-release__cover img { transform: scale(1.03) rotate(-1deg); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2), 0 0 30px color-mix(in srgb, var(--release-accent) 20%, transparent); } /* Body / text side */ .musik-release__body { position: relative; z-index: 1; } .musik-release__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; } .musik-release__emoji { font-size: 1.8rem; line-height: 1; } .musik-release__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.6rem; color: var(--color-text); margin: 0; } .musik-release__desc { font-size: 1rem; color: var(--color-text-muted); line-height: 1.5; margin: 0 0 1.25rem; } /* Streaming links */ .musik-release__links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.25rem; } .musik-link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s, background 0.2s; } .musik-link:hover { transform: translateY(-2px); } .musik-link svg { flex-shrink: 0; } .musik-link--spotify { background: rgba(30, 215, 96, 0.12); color: #1DB954; border: 1px solid rgba(30, 215, 96, 0.25); } .musik-link--spotify:hover { background: rgba(30, 215, 96, 0.22); box-shadow: 0 4px 16px rgba(30, 215, 96, 0.2); } .musik-link--apple { background: rgba(252, 60, 68, 0.10); color: #FC3C44; border: 1px solid rgba(252, 60, 68, 0.22); } .musik-link--apple:hover { background: rgba(252, 60, 68, 0.20); box-shadow: 0 4px 16px rgba(252, 60, 68, 0.18); } .musik-link--youtube { background: rgba(255, 0, 0, 0.08); color: #FF0000; border: 1px solid rgba(255, 0, 0, 0.20); } .musik-link--youtube:hover { background: rgba(255, 0, 0, 0.18); box-shadow: 0 4px 16px rgba(255, 0, 0, 0.15); } /* Spotify embed */ .musik-release__embed { margin-top: 0.5rem; } .musik-release__embed iframe { border-radius: 12px; width: 100%; } /* ── Artist note card ───────────────────────────────────────────── */ .musik-note { padding: 0 0 4rem; } .musik-note__card { background: var(--glass-bg); border: 1px solid var(--card-border); border-radius: var(--radius-card); padding: 1.5rem 2rem; text-align: center; } .musik-note__text { font-size: 0.95rem; color: var(--color-text-muted); line-height: 1.7; margin: 0; } .musik-note__text strong { color: var(--color-text); } /* ── Musik mobile ───────────────────────────────────────────────── */ @media (max-width: 700px) { .musik-release { grid-template-columns: 1fr; text-align: center; padding: 1.5rem; } .musik-release__cover { max-width: 240px; margin: 0 auto; } .musik-release__head { justify-content: center; } .musik-release__links { justify-content: center; } .musik-hero__icon { font-size: 2.8rem; } } @media (min-width: 701px) and (max-width: 900px) { .musik-release { grid-template-columns: 180px 1fr; gap: 1.5rem; } } @media (min-width: 701px) and (max-width: 900px) { .musik-release { grid-template-columns: 180px 1fr; gap: 1.5rem; } } /* ═══════════════════════════════════════════════════════════════════ SOUNDBOARD — Interactive sound button grid ═══════════════════════════════════════════════════════════════════ */ /* ── Hero ───────────────────────────────────────────────────────── */ .sb-hero { padding: 3rem 0 1.5rem; text-align: center; } .sb-hero__back { display: inline-block; font-size: 0.85rem; color: var(--color-text-muted); text-decoration: none; margin-bottom: 1.5rem; transition: color 0.2s; } .sb-hero__back:hover { color: var(--color-primary); } .sb-hero__icon { font-size: 3.5rem; line-height: 1; margin-bottom: 0.75rem; } .sb-hero__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: clamp(2.2rem, 6vw, 3.5rem); color: var(--color-text); margin: 0 0 0.5rem; } .sb-hero__desc { font-size: 1.05rem; color: var(--color-text-muted); max-width: 500px; margin: 0 auto; line-height: 1.6; } .sb-hero__stats { margin-top: 1rem; } .sb-hero__stat { display: inline-block; font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); background: var(--glass-bg); border: 1px solid var(--card-border); border-radius: 999px; padding: 0.35rem 1rem; } /* ── Button grid ────────────────────────────────────────────────── */ .sb-board { padding: 0 0 6rem; } .sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1rem; } /* ── Sound button ───────────────────────────────────────────────── */ .sb-btn { --btn-accent: #FFB347; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 1.4rem 0.75rem; min-height: 120px; border: 1px solid var(--card-border); border-radius: var(--radius-card); background: var(--glass-bg); box-shadow: var(--card-shadow); cursor: pointer; overflow: hidden; font-family: inherit; color: inherit; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.25s ease; animation: sbFadeIn 0.4s ease both; animation-delay: var(--btn-delay, 0s); } @keyframes sbFadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .sb-btn:hover { transform: translateY(-4px) scale(1.04); box-shadow: var(--card-shadow-hover), 0 0 30px color-mix(in srgb, var(--btn-accent) 20%, transparent); border-color: color-mix(in srgb, var(--btn-accent) 45%, var(--card-border)); } .sb-btn:active { transform: translateY(0) scale(0.96); transition-duration: 0.08s; } /* Ring glow behind icon */ .sb-btn__ring { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--btn-accent) 18%, transparent), transparent 70%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .sb-btn:hover .sb-btn__ring { opacity: 1; } /* Playing pulse animation */ .sb-btn__pulse { position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--btn-accent); opacity: 0; pointer-events: none; } .sb-btn--playing .sb-btn__pulse { animation: sbPulse 1s ease-out infinite; } @keyframes sbPulse { 0% { opacity: 0.5; transform: scale(1); } 100% { opacity: 0; transform: scale(1.15); } } /* Play icon */ .sb-btn__icon { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: color-mix(in srgb, var(--btn-accent) 15%, transparent); color: var(--btn-accent); font-size: 1rem; transition: background 0.25s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .sb-btn:hover .sb-btn__icon { background: color-mix(in srgb, var(--btn-accent) 28%, transparent); transform: scale(1.1); } .sb-btn--playing .sb-btn__icon { background: var(--btn-accent); color: #fff; animation: sbBounce 0.6s ease infinite alternate; } @keyframes sbBounce { from { transform: scale(1); } to { transform: scale(1.12); } } /* Label */ .sb-btn__label { position: relative; z-index: 1; font-size: 0.75rem; font-weight: 600; line-height: 1.25; text-align: center; color: var(--color-text); word-break: break-word; max-width: 100%; } /* ── Now-playing bar (fixed bottom) ─────────────────────────────── */ .sb-now { position: fixed; bottom: 0; left: 0; right: 0; z-index: 900; padding: 0.6rem 1rem; background: var(--glass-bg); border-top: 1px solid var(--card-border); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08); } .sb-now__inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 0.75rem; } /* Audio wave bars */ .sb-now__wave { display: flex; align-items: flex-end; gap: 2px; height: 20px; } .sb-now__wave span { display: block; width: 3px; border-radius: 2px; background: var(--color-primary); animation: sbWave 0.8s ease-in-out infinite alternate; } .sb-now__wave span:nth-child(1) { height: 6px; animation-delay: 0s; } .sb-now__wave span:nth-child(2) { height: 14px; animation-delay: 0.15s; } .sb-now__wave span:nth-child(3) { height: 20px; animation-delay: 0.3s; } .sb-now__wave span:nth-child(4) { height: 10px; animation-delay: 0.45s; } .sb-now__wave span:nth-child(5) { height: 16px; animation-delay: 0.6s; } @keyframes sbWave { from { transform: scaleY(0.4); } to { transform: scaleY(1); } } .sb-now__name { flex: 1; font-size: 0.9rem; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-now__stop { background: none; border: 1px solid var(--card-border); border-radius: 50%; width: 34px; height: 34px; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--color-text); transition: background 0.2s, border-color 0.2s; font-family: inherit; } .sb-now__stop:hover { background: var(--color-surface); border-color: var(--color-text-muted); } /* ── Soundboard responsive ──────────────────────────────────────── */ @media (max-width: 600px) { .sb-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 0.75rem; } .sb-btn { padding: 1rem 0.5rem; min-height: 100px; } .sb-btn__icon { width: 36px; height: 36px; font-size: 0.85rem; } .sb-btn__label { font-size: 0.7rem; } .sb-hero__icon { font-size: 2.8rem; } } @media (min-width: 900px) { .sb-grid { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); } } @media (min-width: 900px) { .sb-grid { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); } } /* ═══════════════════════════════════════════════════════════════════ WALLPAPERS — Downloadable background images ═══════════════════════════════════════════════════════════════════ */ /* ── Hero ───────────────────────────────────────────────────────── */ .wp-hero { padding: 3rem 0 1.5rem; text-align: center; } .wp-hero__back { display: inline-block; font-size: 0.85rem; color: var(--color-text-muted); text-decoration: none; margin-bottom: 1.5rem; transition: color 0.2s; } .wp-hero__back:hover { color: var(--color-primary); } .wp-hero__icon { font-size: 3.5rem; line-height: 1; margin-bottom: 0.75rem; } .wp-hero__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: clamp(2.2rem, 6vw, 3.5rem); color: var(--color-text); margin: 0 0 0.5rem; } .wp-hero__desc { font-size: 1.05rem; color: var(--color-text-muted); max-width: 540px; margin: 0 auto; line-height: 1.6; } .wp-hero__stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; } .wp-hero__stat { font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); background: var(--glass-bg); border: 1px solid var(--card-border); border-radius: 999px; padding: 0.35rem 1rem; } /* ── Gallery grid ───────────────────────────────────────────────── */ .wp-gallery { padding: 0 0 2rem; } .wp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 2rem; } /* ── Wallpaper card ─────────────────────────────────────────────── */ .wp-card { --wp-accent: #FFB347; position: relative; border-radius: var(--radius-card); background: var(--glass-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); overflow: hidden; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, border-color 0.3s ease; animation: wpFadeIn 0.6s ease both; animation-delay: var(--wp-delay, 0s); } @keyframes wpFadeIn { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .wp-card:hover { transform: translateY(-6px); box-shadow: var(--card-shadow-hover), 0 0 50px color-mix(in srgb, var(--wp-accent) 15%, transparent); border-color: color-mix(in srgb, var(--wp-accent) 35%, var(--card-border)); } /* Glow */ .wp-card__glow { position: absolute; top: -30%; left: 50%; transform: translateX(-50%); width: 100%; height: 60%; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--wp-accent) 14%, transparent), transparent 70%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; z-index: 0; } .wp-card:hover .wp-card__glow { opacity: 1; } /* Preview image */ .wp-card__preview { position: relative; z-index: 1; overflow: hidden; background: color-mix(in srgb, var(--wp-accent) 8%, var(--color-surface)); } .wp-card__preview img { width: 100%; display: block; object-fit: cover; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .wp-card:hover .wp-card__preview img { transform: scale(1.04); } .wp-card__preview--desktop img { aspect-ratio: 16 / 9; } .wp-card__preview--phone img { aspect-ratio: 9 / 16; max-height: 420px; object-fit: contain; margin: 0 auto; } /* Body */ .wp-card__body { position: relative; z-index: 1; padding: 1.5rem; } .wp-card__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.3rem; color: var(--color-text); margin: 0 0 1rem; } /* Download buttons */ .wp-card__downloads { display: flex; flex-direction: column; gap: 0.5rem; } .wp-dl { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 1rem; border-radius: 12px; background: color-mix(in srgb, var(--wp-accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--wp-accent) 20%, transparent); text-decoration: none; color: inherit; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; } .wp-dl:hover { background: color-mix(in srgb, var(--wp-accent) 20%, transparent); transform: translateX(4px); box-shadow: 0 4px 16px color-mix(in srgb, var(--wp-accent) 15%, transparent); } .wp-dl__icon { font-size: 1.2rem; line-height: 1; flex-shrink: 0; } .wp-dl__info { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; } .wp-dl__label { font-weight: 600; font-size: 0.9rem; color: var(--color-text); } .wp-dl__badge { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 999px; padding: 0.15rem 0.6rem; white-space: nowrap; } /* ── Tip card ───────────────────────────────────────────────────── */ .wp-tip { padding: 0 0 4rem; } .wp-tip__card { background: var(--glass-bg); border: 1px solid var(--card-border); border-radius: var(--radius-card); padding: 1.5rem 2rem; text-align: center; } .wp-tip__text { font-size: 0.95rem; color: var(--color-text-muted); line-height: 1.7; margin: 0; } .wp-tip__text strong { color: var(--color-text); } /* ── Wallpaper mobile ───────────────────────────────────────────── */ @media (max-width: 600px) { .wp-card__preview--phone img { max-height: 320px; } .wp-card__body { padding: 1.25rem; } .wp-card__title { font-size: 1.15rem; } .wp-hero__icon { font-size: 2.8rem; } .wp-dl { padding: 0.55rem 0.75rem; } } /* ═══════════════════════════════════════════════════════════════════ MALEBOG — Coloring book download & preview ═══════════════════════════════════════════════════════════════════ */ /* ── Hero ───────────────────────────────────────────────────────── */ .mb-hero { padding: 3rem 0 1.5rem; text-align: center; } .mb-hero__back { display: inline-block; font-size: 0.85rem; color: var(--color-text-muted); text-decoration: none; margin-bottom: 1.5rem; transition: color 0.2s; } .mb-hero__back:hover { color: var(--color-primary); } .mb-hero__icon { font-size: 3.5rem; line-height: 1; margin-bottom: 0.75rem; } .mb-hero__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: clamp(2rem, 5.5vw, 3rem); color: var(--color-text); margin: 0 0 0.75rem; } .mb-hero__desc { font-size: 1.05rem; color: var(--color-text-muted); max-width: 560px; margin: 0 auto; line-height: 1.7; } /* ── Download CTA ───────────────────────────────────────────────── */ .mb-download { padding: 0 0 1.5rem; } .mb-cta { position: relative; display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.75rem; border-radius: var(--radius-card); background: linear-gradient(135deg, rgba(255, 107, 157, 0.12), rgba(255, 179, 71, 0.12)); border: 1px solid rgba(255, 107, 157, 0.3); text-decoration: none; color: inherit; overflow: hidden; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.3s ease; } .mb-cta:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 40px rgba(255, 107, 157, 0.18), 0 0 40px rgba(255, 107, 157, 0.1); border-color: rgba(255, 107, 157, 0.5); } .mb-cta:active { transform: translateY(0) scale(0.98); transition-duration: 0.08s; } .mb-cta__glow { position: absolute; top: -40%; right: -20%; width: 50%; height: 140%; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 107, 157, 0.15), transparent 70%); opacity: 0; transition: opacity 0.5s; pointer-events: none; } .mb-cta:hover .mb-cta__glow { opacity: 1; } .mb-cta__emoji { font-size: 2rem; line-height: 1; flex-shrink: 0; position: relative; z-index: 1; } .mb-cta__text { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; } .mb-cta__text strong { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.2rem; color: var(--color-text); } .mb-cta__text small { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.15rem; } .mb-cta__arrow { position: relative; z-index: 1; font-size: 1.3rem; font-weight: 700; color: #FF6B9D; transition: transform 0.3s; } .mb-cta:hover .mb-cta__arrow { transform: translateX(6px); } /* ── Instagram card ─────────────────────────────────────────────── */ .mb-insta { padding: 0 0 2rem; } .mb-insta__card { background: var(--glass-bg); border: 1px solid var(--card-border); border-radius: var(--radius-card); padding: 1.25rem 1.75rem; text-align: center; } .mb-insta__text { font-size: 0.95rem; color: var(--color-text-muted); line-height: 1.7; margin: 0; } .mb-insta__text a { color: #E1306C; font-weight: 600; text-decoration: none; } .mb-insta__text a:hover { text-decoration: underline; } /* ── Preview gallery ────────────────────────────────────────────── */ .mb-preview { padding: 0 0 4rem; } .mb-preview__heading { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.3rem; color: var(--color-text); text-align: center; margin: 0 0 1.5rem; } .mb-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1.5rem; } .mb-gallery__item { display: block; border-radius: var(--radius-card); overflow: hidden; background: var(--glass-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; animation: mbFadeIn 0.5s ease both; animation-delay: var(--mb-delay, 0s); } @keyframes mbFadeIn { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .mb-gallery__item:hover { transform: translateY(-6px) scale(1.02); box-shadow: var(--card-shadow-hover), 0 0 40px rgba(255, 107, 157, 0.12); } .mb-gallery__item img { width: 100%; height: auto; display: block; } /* ═══════════════════════════════════════════════════════════════════ HÆKLEOPSKRIFT — Crochet pattern gallery ═══════════════════════════════════════════════════════════════════ */ /* ── Hero ───────────────────────────────────────────────────────── */ .hk-hero { padding: 3rem 0 1.5rem; text-align: center; } .hk-hero__back { display: inline-block; font-size: 0.85rem; color: var(--color-text-muted); text-decoration: none; margin-bottom: 1.5rem; transition: color 0.2s; } .hk-hero__back:hover { color: var(--color-primary); } .hk-hero__icon { font-size: 3.5rem; line-height: 1; margin-bottom: 0.75rem; } .hk-hero__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: clamp(2rem, 5.5vw, 3rem); color: var(--color-text); margin: 0 0 0.75rem; } .hk-hero__desc { font-size: 1.05rem; color: var(--color-text-muted); max-width: 580px; margin: 0 auto; line-height: 1.7; } /* ── Download CTA ───────────────────────────────────────────────── */ .hk-download { padding: 0 0 1.5rem; } .hk-cta { position: relative; display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.75rem; border-radius: var(--radius-card); background: linear-gradient(135deg, rgba(155, 126, 216, 0.12), rgba(255, 179, 71, 0.12)); border: 1px solid rgba(155, 126, 216, 0.3); text-decoration: none; color: inherit; overflow: hidden; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.3s ease; } .hk-cta:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 40px rgba(155, 126, 216, 0.18), 0 0 40px rgba(155, 126, 216, 0.1); border-color: rgba(155, 126, 216, 0.5); } .hk-cta:active { transform: translateY(0) scale(0.98); transition-duration: 0.08s; } .hk-cta__glow { position: absolute; top: -40%; right: -20%; width: 50%; height: 140%; border-radius: 50%; background: radial-gradient(ellipse, rgba(155, 126, 216, 0.15), transparent 70%); opacity: 0; transition: opacity 0.5s; pointer-events: none; } .hk-cta:hover .hk-cta__glow { opacity: 1; } .hk-cta__emoji { font-size: 2rem; line-height: 1; flex-shrink: 0; position: relative; z-index: 1; } .hk-cta__text { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; } .hk-cta__text strong { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.2rem; color: var(--color-text); } .hk-cta__text small { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.15rem; } .hk-cta__arrow { position: relative; z-index: 1; font-size: 1.3rem; font-weight: 700; color: #9B7ED8; transition: transform 0.3s; } .hk-cta:hover .hk-cta__arrow { transform: translateX(6px); } /* ── Instagram card ─────────────────────────────────────────────── */ .hk-insta { padding: 0 0 2rem; } .hk-insta__card { background: var(--glass-bg); border: 1px solid var(--card-border); border-radius: var(--radius-card); padding: 1.25rem 1.75rem; text-align: center; } .hk-insta__text { font-size: 0.95rem; color: var(--color-text-muted); line-height: 1.7; margin: 0; } .hk-insta__text a { color: #E1306C; font-weight: 600; text-decoration: none; } .hk-insta__text a:hover { text-decoration: underline; } /* ── Gallery grid ───────────────────────────────────────────────── */ .hk-preview { padding: 0 0 4rem; } .hk-preview__heading { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.3rem; color: var(--color-text); text-align: center; margin: 0 0 1.5rem; } .hk-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 1.25rem; } .hk-gallery__item { display: block; border-radius: var(--radius-card); overflow: hidden; background: var(--glass-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; animation: hkFadeIn 0.45s ease both; animation-delay: var(--hk-delay, 0s); } @keyframes hkFadeIn { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .hk-gallery__item:hover { transform: translateY(-6px) scale(1.03); box-shadow: var(--card-shadow-hover), 0 0 36px rgba(155, 126, 216, 0.12); } .hk-gallery__item img { width: 100%; height: auto; display: block; } /* ═══════════════════════════════════════════════════════════════════ OPGAVEBOG — Puzzles & activity sheets ═══════════════════════════════════════════════════════════════════ */ /* ── Hero ───────────────────────────────────────────────────────── */ .og-hero { padding: 3rem 0 1.5rem; text-align: center; } .og-hero__back { display: inline-block; font-size: 0.85rem; color: var(--color-text-muted); text-decoration: none; margin-bottom: 1.5rem; transition: color 0.2s; } .og-hero__back:hover { color: var(--color-primary); } .og-hero__icon { font-size: 3.5rem; line-height: 1; margin-bottom: 0.75rem; } .og-hero__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: clamp(2rem, 5.5vw, 3rem); color: var(--color-text); margin: 0 0 0.75rem; } .og-hero__desc { font-size: 1.05rem; color: var(--color-text-muted); max-width: 560px; margin: 0 auto; line-height: 1.7; } /* ── Instagram card ─────────────────────────────────────────────── */ .og-insta { padding: 0 0 2rem; } .og-insta__card { background: var(--glass-bg); border: 1px solid var(--card-border); border-radius: var(--radius-card); padding: 1.25rem 1.75rem; text-align: center; } .og-insta__text { font-size: 0.95rem; color: var(--color-text-muted); line-height: 1.7; margin: 0; } .og-insta__text a { color: #E1306C; font-weight: 600; text-decoration: none; } .og-insta__text a:hover { text-decoration: underline; } /* ── Opgave cards ───────────────────────────────────────────────── */ .og-list { padding: 0 0 4rem; } .og-card { display: grid; grid-template-columns: 280px 1fr; gap: 1.5rem; align-items: start; background: var(--glass-bg); border: 1px solid var(--card-border); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--card-shadow); margin-bottom: 1.5rem; animation: ogFadeIn 0.5s ease both; animation-delay: var(--og-delay, 0s); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; } @keyframes ogFadeIn { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .og-card:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover), 0 0 40px color-mix(in srgb, var(--og-accent) 15%, transparent); } /* Preview image */ .og-card__preview { display: block; overflow: hidden; aspect-ratio: auto; } .og-card__preview img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; } .og-card__preview:hover img { transform: scale(1.05); } /* Body */ .og-card__body { padding: 1.5rem 1.5rem 1.5rem 0; display: flex; flex-direction: column; justify-content: center; } .og-card__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.3rem; color: var(--color-text); margin: 0 0 0.5rem; } .og-card__desc { font-size: 0.95rem; color: var(--color-text-muted); line-height: 1.65; margin: 0 0 1.25rem; } /* Download pill */ .og-card__dl { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.25rem; border-radius: 999px; background: linear-gradient(135deg, color-mix(in srgb, var(--og-accent) 18%, transparent), color-mix(in srgb, var(--og-accent) 8%, transparent)); border: 1px solid color-mix(in srgb, var(--og-accent) 35%, transparent); color: var(--color-text); font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease; } .og-card__dl:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 6px 24px color-mix(in srgb, var(--og-accent) 20%, transparent); border-color: color-mix(in srgb, var(--og-accent) 55%, transparent); } .og-card__dl:active { transform: scale(0.97); transition-duration: 0.08s; } .og-card__dl-icon { font-size: 1.15rem; line-height: 1; } /* ═══════════════════════════════════════════════════════════════════ MØD MIG — Events & meet-and-greets ═══════════════════════════════════════════════════════════════════ */ /* ── Hero ───────────────────────────────────────────────────────── */ .mm-hero { padding: 3rem 0 1.5rem; text-align: center; } .mm-hero__icon { font-size: 3.5rem; line-height: 1; margin-bottom: 0.75rem; } .mm-hero__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: clamp(2rem, 5.5vw, 3rem); color: var(--color-text); margin: 0 0 0.75rem; } .mm-hero__desc { font-size: 1.05rem; color: var(--color-text-muted); max-width: 540px; margin: 0 auto; line-height: 1.7; } /* ── Section titles ─────────────────────────────────────────────── */ .mm-section__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.4rem; color: var(--color-text); margin: 0 0 1.25rem; } /* ── Upcoming event card ────────────────────────────────────────── */ .mm-upcoming { padding: 0 0 2.5rem; } .mm-event--upcoming { position: relative; background: var(--glass-bg); border: 1px solid color-mix(in srgb, var(--ev-accent) 30%, var(--card-border)); border-radius: var(--radius-card); padding: 2rem; overflow: hidden; box-shadow: var(--card-shadow); animation: mmFadeIn 0.5s ease both; animation-delay: var(--ev-delay, 0s); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; } @keyframes mmFadeIn { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .mm-event--upcoming:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover), 0 0 50px color-mix(in srgb, var(--ev-accent) 15%, transparent); } .mm-event__glow { position: absolute; top: -50%; right: -30%; width: 60%; height: 160%; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--ev-accent) 12%, transparent), transparent 70%); pointer-events: none; z-index: 0; } .mm-event__header { position: relative; z-index: 1; display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; } .mm-event__emoji { font-size: 2.5rem; line-height: 1; flex-shrink: 0; } .mm-event__year { display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ev-accent); background: color-mix(in srgb, var(--ev-accent) 12%, transparent); padding: 0.2rem 0.6rem; border-radius: 999px; margin-bottom: 0.25rem; } .mm-event__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.5rem; color: var(--color-text); margin: 0; } .mm-event__dates { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; } .mm-event__date { font-size: 0.9rem; font-weight: 600; color: var(--color-text); background: color-mix(in srgb, var(--ev-accent) 10%, transparent); padding: 0.35rem 0.85rem; border-radius: var(--radius-card); border: 1px solid color-mix(in srgb, var(--ev-accent) 20%, transparent); } .mm-event__location { position: relative; z-index: 1; font-size: 0.95rem; font-weight: 500; color: var(--color-text-muted); margin-bottom: 1rem; } .mm-event__desc { position: relative; z-index: 1; font-size: 1rem; line-height: 1.75; color: var(--color-text-muted); margin: 0 0 1rem; } .mm-event__desc s { text-decoration: line-through; opacity: 0.6; } .mm-event__tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; } .mm-event__tag { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); background: var(--glass-bg); border: 1px solid var(--card-border); padding: 0.2rem 0.6rem; border-radius: 999px; } .mm-event__link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.65rem 1.25rem; border-radius: 999px; background: linear-gradient(135deg, color-mix(in srgb, var(--ev-accent) 18%, transparent), color-mix(in srgb, var(--ev-accent) 8%, transparent)); border: 1px solid color-mix(in srgb, var(--ev-accent) 35%, transparent); color: var(--color-text); font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; } .mm-event__link:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 6px 24px color-mix(in srgb, var(--ev-accent) 20%, transparent); } /* ── Past events ────────────────────────────────────────────────── */ .mm-past { padding: 0 0 4rem; } .mm-year-group { margin-bottom: 2rem; } .mm-year-group:last-child { margin-bottom: 0; } .mm-year-group__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.15rem; color: var(--color-text-muted); margin: 0 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--card-border); } .mm-past-list { display: flex; flex-direction: column; gap: 0.75rem; } .mm-past-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem; border-radius: var(--radius-card); background: var(--glass-bg); border: 1px solid var(--card-border); animation: mmFadeIn 0.4s ease both; animation-delay: var(--past-delay, 0s); transition: transform 0.3s ease, box-shadow 0.3s ease; } .mm-past-item:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); } .mm-past-item__emoji { font-size: 1.5rem; line-height: 1; flex-shrink: 0; margin-top: 0.1rem; } .mm-past-item__body { display: flex; flex-direction: column; gap: 0.15rem; } .mm-past-item__date { font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .mm-past-item__title { font-size: 1rem; color: var(--color-text); } .mm-past-item__desc { font-size: 0.85rem; color: var(--color-text-muted); } /* ── Mød Mig mobile ─────────────────────────────────────────────── */ @media (max-width: 600px) { .mm-hero__icon { font-size: 2.8rem; } .mm-event--upcoming { padding: 1.5rem; } .mm-event__dates { flex-direction: column; } .mm-event__header { flex-direction: column; text-align: center; } } /* ── Opgavebog mobile ───────────────────────────────────────────── */ @media (max-width: 600px) { .og-hero__icon { font-size: 2.8rem; } .og-card { grid-template-columns: 1fr; } .og-card__body { padding: 1.25rem; } } /* ── Hækleopskrift mobile ───────────────────────────────────────── */ @media (max-width: 600px) { .hk-hero__icon { font-size: 2.8rem; } .hk-cta { flex-direction: column; text-align: center; padding: 1.25rem; } .hk-cta__arrow { display: none; } .hk-gallery { grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 0.75rem; } } /* ── Malebog mobile ─────────────────────────────────────────────── */ @media (max-width: 600px) { .mb-hero__icon { font-size: 2.8rem; } .mb-cta { flex-direction: column; text-align: center; padding: 1.25rem; } .mb-cta__arrow { display: none; } } /* ── Mobile tweaks ───────────────────────────────────────────────── */ @media (max-width: 600px) { .post__header { padding: 2rem 0 1rem; } .post__title { font-size: 1.6rem; } .post__lead { font-size: 1rem; } .post__content.prose { font-size: 1rem; } .post__content.prose .col-4 { flex: 0 0 100%; } .post__content.prose .col-6 { flex: 0 0 100%; } .related__grid { grid-template-columns: repeat(2, 1fr); } .blog-grid { grid-template-columns: 1fr; } .vid-hero__channel { flex-direction: column; text-align: center; } .vid-hero__stats { justify-content: center; } .vid-top__row { grid-template-columns: 1fr; } .vid-grid { grid-template-columns: 1fr; } .kreativ-grid { grid-template-columns: 1fr; } .kreativ-card { padding: 2rem 1.25rem 1.5rem; } } @media (min-width: 601px) and (max-width: 900px) { .vid-grid { grid-template-columns: repeat(2, 1fr); } } /* ═══════════════════════════════════════════════════════════════════ IMAGE LIGHTBOX — Full-screen image viewer ═══════════════════════════════════════════════════════════════════ */ .lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } .lightbox--open { opacity: 1; visibility: visible; } /* Backdrop */ .lightbox__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); } /* Close button */ .lightbox__close { position: absolute; top: max(1rem, env(safe-area-inset-top, 1rem)); right: 1.25rem; z-index: 3; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; transition: background 0.2s, transform 0.2s; } .lightbox__close:hover { background: rgba(255, 255, 255, 0.22); transform: scale(1.1); } /* Nav arrows */ .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; transition: background 0.2s, transform 0.2s; } .lightbox__nav:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-50%) scale(1.1); } .lightbox__nav--prev { left: 1rem; } .lightbox__nav--next { right: 1rem; } /* Image stage */ .lightbox__stage { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 3.5rem 4rem; pointer-events: none; } .lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-md, 16px); box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5); opacity: 0; transform: scale(0.96); transition: opacity 0.3s, transform 0.3s; pointer-events: auto; } .lightbox__img--loaded { opacity: 1; transform: scale(1); } /* Counter pill */ .lightbox__counter { position: absolute; bottom: max(1.25rem, env(safe-area-inset-bottom, 1.25rem)); left: 50%; transform: translateX(-50%); z-index: 3; padding: 0.3rem 0.9rem; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius-pill, 9999px); color: rgba(255, 255, 255, 0.8); font-size: 0.8rem; font-weight: 600; } /* Mobile adjustments */ @media (max-width: 600px) { .lightbox__stage { padding: 3rem 0.5rem; } .lightbox__nav { width: 40px; height: 40px; font-size: 1.4rem; } .lightbox__nav--prev { left: 0.5rem; } .lightbox__nav--next { right: 0.5rem; } .lightbox__img { border-radius: var(--radius-sm, 10px); } } /* ── GirafPingvin story page ──────────────────────────── */ /* Full-width story images */ .gp-story-img { margin: 0 0 2rem; text-align: center; } .gp-story-img__pic { width: 100%; border-radius: var(--radius-card); display: block; } .gp-story-img__pic--contain { width: auto; max-width: 100%; max-height: 420px; margin: 0 auto; object-fit: contain; } .gp-story-img--character, .gp-story-img--wave { margin: 2rem 0; } /* Float helper for inline images */ .gp-float-end { float: right; margin: 0 0 1rem 1.25rem; shape-margin: 0.75rem; } /* Section titles */ .gp-section-title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.5rem; color: var(--color-text); text-align: center; margin: 3rem 0 1.5rem; } /* Stats highlight strip */ .gp-stats { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin: 2.5rem 0 3rem; } .gp-stats__item { background: var(--glass-bg); border: 1px solid var(--card-border); border-radius: var(--radius-card); padding: 1.25rem 1.75rem; text-align: center; flex: 1; min-width: 140px; max-width: 220px; } .gp-stats__number { display: block; font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.6rem; color: var(--stat-color, var(--color-primary)); line-height: 1.2; } .gp-stats__label { display: block; font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.25rem; text-transform: uppercase; letter-spacing: 0.04em; } /* Photo gallery */ .gp-gallery-intro { font-size: 1rem; color: var(--color-text-muted); text-align: center; margin: 0 0 2rem; } .gp-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 3rem; } .gp-gallery__item { background: var(--glass-bg); border: 1px solid var(--card-border); border-radius: var(--radius-card); overflow: hidden; text-align: center; transition: transform 0.2s, box-shadow 0.2s; } .gp-gallery__item:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); } .gp-gallery__img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 1rem; display: block; } .gp-gallery__desc { font-size: 0.8rem; color: var(--color-text-muted); padding: 0 0.75rem 0.75rem; margin: 0; line-height: 1.4; } @media (max-width: 700px) { .gp-gallery { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .gp-float-end { float: none; display: block; margin: 0 auto 1rem; } .gp-stats__item { min-width: 100px; padding: 1rem; } .gp-stats__number { font-size: 1.3rem; } } @media (max-width: 440px) { .gp-gallery { grid-template-columns: 1fr; max-width: 280px; margin-left: auto; margin-right: auto; } } /* ── Discord page ────────────────────────────────────────────────── */ /* Hero / Join CTA */ .discord-hero { text-align: center; padding: 3rem 1.5rem 2rem; } .discord-hero__icon { color: #5865F2; margin-bottom: 1rem; } .discord-hero__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--color-text); margin: 0 0 0.75rem; } .discord-hero__desc { font-size: 1.05rem; color: var(--color-text-muted); margin: 0 0 1.5rem; max-width: 520px; margin-left: auto; margin-right: auto; line-height: 1.6; } .discord-hero__btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.75rem 2rem; border-radius: 999px; background: #5865F2; color: #fff; font-weight: 700; font-size: 1rem; text-decoration: none; transition: background 0.2s, transform 0.15s, box-shadow 0.2s; box-shadow: 0 4px 16px rgba(88,101,242,.35); } .discord-hero__btn:hover { background: #4752c4; transform: translateY(-2px); box-shadow: 0 6px 24px rgba(88,101,242,.5); } /* Section title */ .discord-section-title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.4rem; color: var(--color-text); text-align: center; margin: 2.5rem 0 1.25rem; } /* Today's question */ .discord-qotd { max-width: 600px; margin: 0 auto 2rem; text-align: center; } .discord-qotd__heading { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.2rem; color: var(--color-text); margin: 0 0 0.75rem; } .discord-qotd__quote { background: var(--glass-bg); border: 1px solid var(--card-border); border-left: 4px solid #5865F2; border-radius: var(--radius-card); padding: 1.25rem 1.5rem; margin: 0 0 0.75rem; font-size: 1.1rem; color: var(--color-text); font-style: italic; line-height: 1.6; } .discord-qotd__cta { font-size: 0.85rem; color: var(--color-text-muted); margin: 0; } /* Live chat feed */ .discord-chat { max-width: 700px; margin: 0 auto 2.5rem; } .discord-chat__feed { background: var(--glass-bg); border: 1px solid var(--card-border); border-radius: var(--radius-card); max-height: 420px; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; } .discord-chat__msg { display: grid; grid-template-columns: auto 1fr auto; gap: 0.4rem 0.6rem; align-items: baseline; padding: 0.35rem 0; border-bottom: 1px solid color-mix(in srgb, var(--card-border) 50%, transparent); } .discord-chat__msg:last-child { border-bottom: none; } .discord-chat__msg--new { animation: discord-msg-in 0.3s ease; } @keyframes discord-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .discord-chat__author { font-weight: 700; font-size: 0.85rem; color: #5865F2; white-space: nowrap; } .discord-chat__text { font-size: 0.9rem; color: var(--color-text); word-break: break-word; line-height: 1.4; } .discord-chat__time { font-size: 0.7rem; color: var(--color-text-muted); white-space: nowrap; } /* Leaderboard */ .discord-leaderboard { max-width: 600px; margin: 0 auto 2.5rem; } .discord-leaderboard__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .discord-leaderboard__item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--glass-bg); border: 1px solid var(--card-border); border-radius: var(--radius-card); transition: transform 0.15s, box-shadow 0.15s; } .discord-leaderboard__item:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); } .discord-leaderboard__rank { font-family: var(--font-heading); font-weight: 800; font-size: 1.1rem; color: var(--color-text-muted); min-width: 1.8rem; text-align: center; } .discord-leaderboard__item:nth-child(1) .discord-leaderboard__rank { color: #FFD700; } .discord-leaderboard__item:nth-child(2) .discord-leaderboard__rank { color: #C0C0C0; } .discord-leaderboard__item:nth-child(3) .discord-leaderboard__rank { color: #CD7F32; } .discord-leaderboard__avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .discord-leaderboard__info { display: flex; flex-direction: column; min-width: 0; } .discord-leaderboard__name { font-weight: 700; font-size: 0.95rem; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .discord-leaderboard__meta { font-size: 0.75rem; color: var(--color-text-muted); } /* Moderators grid */ .discord-mods { max-width: 700px; margin: 0 auto 2.5rem; } .discord-mods__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1rem; } .discord-mods__card { text-align: center; padding: 1rem 0.5rem; background: var(--glass-bg); border: 1px solid var(--card-border); border-radius: var(--radius-card); transition: transform 0.15s, box-shadow 0.15s; } .discord-mods__card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); } .discord-mods__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-bottom: 0.5rem; border: 2px solid #5865F2; } .discord-mods__name { display: block; font-size: 0.8rem; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Join bottom CTA */ .discord-join-bottom { text-align: center; padding: 2rem 1rem 3rem; } .discord-join-bottom p { font-size: 1.1rem; color: var(--color-text-muted); margin: 0 0 1rem; } /* Mobile adjustments */ @media (max-width: 600px) { .discord-chat__msg { grid-template-columns: 1fr; gap: 0.15rem; } .discord-chat__time { justify-self: end; } .discord-mods__grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 0.6rem; } .discord-mods__avatar { width: 44px; height: 44px; } .discord-leaderboard__item { padding: 0.6rem 0.75rem; gap: 0.5rem; } } .story-viewer__nav--next { right: 0; }