/* ========================================================== Lil Dip Media network — shared styles Each page sets a theme class on : theme-ldm | theme-b2b | theme-s2s | theme-petty | theme-facts ========================================================== */ :root { --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --radius: 18px; --radius-sm: 10px; --max: 1160px; --shadow: 0 10px 30px rgba(0, 0, 0, .12); --shadow-lg: 0 24px 60px rgba(0, 0, 0, .22); --ease: cubic-bezier(.2, .8, .2, 1); } /* ---------- Themes ---------- */ .theme-ldm { --bg: #0a0a0a; --surface: #131313; --surface-2: #1b1b1b; --border: rgba(212,175,55,.22); --text: #f6f1e5; --muted: #b9b09c; --accent: #d4af37; --accent-2: #f5d97a; --accent-ink: #0a0a0a; --grad: linear-gradient(135deg, #a67c1f 0%, #f5d97a 45%, #d4af37 60%, #8f6a17 100%); --hero-bg: radial-gradient(1200px 600px at 50% -10%, rgba(212,175,55,.22), transparent 60%), #0a0a0a; --hero-text: #f6f1e5; --nav-bg: rgba(10,10,10,.82); --nav-text: #f6f1e5; --footer-bg: #050505; --footer-text: #b9b09c; --font-display: "Cinzel", Georgia, serif; } .theme-b2b { --bg: #ffffff; --surface: #f3f7ff; --surface-2: #e6efff; --border: #d4e2fb; --text: #0b1b36; --muted: #4b5d7e; --accent: #1250c4; --accent-2: #3d8bff; --accent-ink: #ffffff; --grad: linear-gradient(135deg, #0a2a6b 0%, #1250c4 55%, #3d8bff 100%); --hero-bg: radial-gradient(900px 500px at 80% 0%, rgba(61,139,255,.45), transparent 60%), linear-gradient(160deg, #06193f 0%, #0b3a92 70%, #1250c4 100%); --hero-text: #ffffff; --nav-bg: rgba(6,25,63,.9); --nav-text: #ffffff; --footer-bg: #06193f; --footer-text: #c5d6f5; --font-display: "Oswald", Impact, sans-serif; } .theme-s2s { --bg: #ffffff; --surface: #fff3f8; --surface-2: #ffe4ef; --border: #fbd0e2; --text: #3a0f24; --muted: #86506a; --accent: #e0417f; --accent-2: #ff8fbd; --accent-ink: #ffffff; --grad: linear-gradient(135deg, #c2185b 0%, #e0417f 50%, #ff9cc6 100%); --hero-bg: radial-gradient(900px 500px at 20% 0%, rgba(255,160,200,.6), transparent 60%), linear-gradient(160deg, #b0124f 0%, #e0417f 65%, #ff8fbd 100%); --hero-text: #ffffff; --nav-bg: rgba(122,10,55,.9); --nav-text: #ffffff; --footer-bg: #5c0a2c; --footer-text: #ffd3e5; --font-display: "Playfair Display", Georgia, serif; } .theme-petty { --bg: #ffffff; --surface: #fff5ec; --surface-2: #ffe6cf; --border: #f3d2b4; --text: #111111; --muted: #5a4a3d; --accent: #ff6a00; --accent-2: #ff9a3c; --accent-ink: #111111; --grad: linear-gradient(135deg, #ff5a00 0%, #ff8a1f 60%, #ffb347 100%); --hero-bg: radial-gradient(800px 480px at 85% 10%, rgba(255,106,0,.35), transparent 60%), #0d0d0d; --hero-text: #ffffff; --nav-bg: rgba(13,13,13,.92); --nav-text: #ffffff; --footer-bg: #0d0d0d; --footer-text: #d6c7b8; --font-display: "Archivo Black", Impact, sans-serif; } .theme-facts { --bg: #ffffff; --surface: #fff4f4; --surface-2: #ffe3e3; --border: #f6cfcf; --text: #1d0b0b; --muted: #6e4a4a; --accent: #d7141a; --accent-2: #ff4d4f; --accent-ink: #ffffff; --grad: linear-gradient(135deg, #9e0b10 0%, #d7141a 55%, #ff4d4f 100%); --hero-bg: radial-gradient(900px 500px at 50% 0%, rgba(255,90,90,.45), transparent 60%), linear-gradient(160deg, #7a070b 0%, #c10f15 70%, #e3262c 100%); --hero-text: #ffffff; --nav-bg: rgba(90,5,8,.9); --nav-text: #ffffff; --footer-bg: #3f0306; --footer-text: #f5c9ca; --font-display: "Bebas Neue", Impact, sans-serif; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, video, iframe { max-width: 100%; display: block; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; margin: 0 0 .5em; letter-spacing: .01em; } h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); } h3 { font-size: 1.35rem; } p { margin: 0 0 1em; } .container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; } .section { padding: clamp(56px, 8vw, 96px) 0; } .section-alt { background: var(--surface); } .section-head { text-align: center; max-width: 720px; margin: 0 auto 44px; } .section-head p { color: var(--muted); font-size: 1.08rem; } .eyebrow { display: inline-block; font: 700 .78rem/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } .skip { position: absolute; left: -999px; top: 0; background: #fff; color: #000; padding: 8px 12px; z-index: 999; } .skip:focus { left: 12px; top: 12px; } :focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); color: var(--nav-text); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid rgba(255,255,255,.08); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; } .nav-brand { display: flex; align-items: center; gap: 10px; color: var(--nav-text); font: 700 1rem/1 var(--font-body); letter-spacing: .06em; } .nav-brand:hover { text-decoration: none; } .nav-brand svg { width: 34px; height: 34px; } .nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .nav-links a { display: block; color: var(--nav-text); opacity: .82; padding: 8px 12px; border-radius: 999px; font-size: .92rem; font-weight: 600; transition: opacity .2s, background .2s; } .nav-links a:hover, .nav-links a[aria-current="page"] { opacity: 1; background: rgba(255,255,255,.12); text-decoration: none; } .nav-toggle { display: none; background: none; border: 0; color: var(--nav-text); padding: 8px; cursor: pointer; } .nav-toggle svg { width: 26px; height: 26px; } @media (max-width: 860px) { .nav-toggle { display: block; } .nav-links { position: absolute; left: 0; right: 0; top: 64px; flex-direction: column; align-items: stretch; background: var(--nav-bg); padding: 10px 16px 18px; gap: 2px; display: none; border-bottom: 1px solid rgba(255,255,255,.1); } .nav-links.open { display: flex; } .nav-links a { padding: 12px 14px; border-radius: 10px; font-size: 1rem; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; border-radius: 999px; border: 2px solid transparent; font: 700 1rem/1 var(--font-body); letter-spacing: .02em; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; text-decoration: none !important; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--grad); color: var(--accent-ink); box-shadow: 0 10px 24px rgba(0,0,0,.18); } .btn-primary:hover { box-shadow: 0 16px 34px rgba(0,0,0,.26); } .btn-ghost { border-color: currentColor; color: inherit; background: transparent; } .btn-light { background: #fff; color: #111; } .btn svg { width: 20px; height: 20px; } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } /* ---------- Brand hero (logo at top of each page) ---------- */ .hero { position: relative; background: var(--hero-bg); color: var(--hero-text); text-align: center; padding: clamp(56px, 9vw, 110px) 0 clamp(64px, 9vw, 110px); overflow: hidden; } .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(to bottom, #000, transparent 85%); -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%); } .hero > .container { position: relative; z-index: 1; } .hero-logo { width: clamp(150px, 26vw, 220px); height: auto; margin: 0 auto 22px; filter: drop-shadow(0 18px 40px rgba(0,0,0,.35)); animation: floaty 6s ease-in-out infinite; } .wordmark { font-family: var(--font-display); font-size: clamp(2.6rem, 8vw, 5.2rem); line-height: 1; margin: 0 0 14px; letter-spacing: .03em; } .powered { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; font: 600 .82rem/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--hero-text); opacity: .92; padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); } .powered:hover { text-decoration: none; opacity: 1; background: rgba(255,255,255,.16); } .powered b { color: #f5d97a; font-weight: 800; } .hero-lede { max-width: 640px; margin: 0 auto 30px; font-size: clamp(1.05rem, 2.2vw, 1.25rem); opacity: .92; } .hero .btn-primary { background: #fff; color: var(--accent); } .theme-ldm .hero .btn-primary, .theme-petty .hero .btn-primary { background: var(--grad); color: var(--accent-ink); } .hero .btn-ghost { color: var(--hero-text); } /* ---------- LDM home hero ---------- */ .theme-ldm .wordmark { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: .08em; font-weight: 700; } .tagline { font: 600 clamp(.8rem, 1.8vw, .95rem)/1.4 var(--font-body); letter-spacing: .32em; text-transform: uppercase; color: var(--accent-2); margin: 0 0 30px; display: flex; align-items: center; justify-content: center; gap: 14px; } .tagline::before, .tagline::after { content: ""; height: 1px; width: clamp(24px, 8vw, 70px); background: var(--grad); } .shine { position: relative; } .shine::after { content: ""; position: absolute; inset: -10%; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%); transform: translateX(-120%); animation: shine 5.5s ease-in-out infinite; mix-blend-mode: overlay; } /* ---------- Network grid ---------- */ .network-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 24px; } .site-card { --c1: #333; --c2: #666; --ink: #fff; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 26px 28px; border-radius: 24px; color: var(--ink); overflow: hidden; isolation: isolate; background: linear-gradient(160deg, var(--c1), var(--c2)); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, var(--shadow-lg); transition: transform .45s var(--ease), box-shadow .45s var(--ease); text-decoration: none !important; } .site-card::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .45s; background: radial-gradient(600px 240px at 50% 0%, rgba(255,255,255,.25), transparent 70%); } .site-card:hover { transform: translateY(-8px) scale(1.015); box-shadow: 0 30px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(212,175,55,.55); } .site-card:hover::before { opacity: 1; } .site-card .card-logo { width: 150px; height: 150px; margin-bottom: 18px; } .site-card h3 { font-size: 1.6rem; margin-bottom: 6px; color: var(--ink); } .site-card .handle { font: 600 .9rem/1 var(--font-body); opacity: .8; margin-bottom: 14px; } .site-card p { opacity: .88; font-size: .98rem; margin-bottom: 20px; } .site-card .visit { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .95rem; padding: 10px 18px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); transition: background .3s, gap .3s; } .site-card:hover .visit { background: rgba(255,255,255,.26); gap: 14px; } .card-b2b { --c1: #06193f; --c2: #1250c4; } .card-s2s { --c1: #b0124f; --c2: #ff8fbd; } .card-petty { --c1: #0d0d0d; --c2: #2a1606; } .card-facts { --c1: #7a070b; --c2: #e3262c; } .card-lildip{ --c1: #151515; --c2: #3a2f12; } /* per-card logo animations: idle + stronger on hover */ .card-b2b .card-logo { animation: b2bPulse 4s ease-in-out infinite; } .card-b2b:hover .card-logo { animation: b2bSpin 1.1s var(--ease); } .card-s2s .card-logo { animation: heartbeat 2.4s ease-in-out infinite; } .card-s2s:hover .card-logo { animation: heartbeat .9s ease-in-out infinite; } .card-petty .card-logo { transform-origin: 50% 8%; animation: swing 3.2s ease-in-out infinite; } .card-petty:hover .card-logo { animation: swing .8s ease-in-out infinite; } .card-facts .card-logo { animation: glow 3s ease-in-out infinite; } .card-facts:hover .card-logo { animation: pop .7s var(--ease), glow 1.2s ease-in-out infinite; } .card-lildip .card-logo { animation: floaty 5s ease-in-out infinite; } .card-lildip:hover .card-logo { animation: drip 1s var(--ease); } @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } } @keyframes b2bPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes b2bSpin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } } @keyframes heartbeat { 0%,100% { transform: scale(1); } 15% { transform: scale(1.08); } 30% { transform: scale(.98); } 45% { transform: scale(1.06); } 60% { transform: scale(1); } } @keyframes swing { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } } @keyframes glow { 0%,100% { filter: drop-shadow(0 0 0 rgba(255,220,120,0)); } 50% { filter: drop-shadow(0 0 22px rgba(255,220,120,.75)); } } @keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.14) rotate(-4deg); } 100% { transform: scale(1); } } @keyframes drip { 0% { transform: translateY(0) scaleY(1); } 35% { transform: translateY(8px) scaleY(1.08); } 70% { transform: translateY(-6px) scaleY(.96); } 100% { transform: translateY(0) scaleY(1); } } @keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } /* reveal on scroll */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal.in { opacity: 1; transform: none; } /* ---------- Video showcase ---------- */ .video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; } .video-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .video-frame { position: relative; aspect-ratio: 9 / 16; background: #000; } .video-frame.wide { aspect-ratio: 16 / 9; } .video-frame iframe, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; } .video-card .video-meta { padding: 14px 18px 18px; } .video-card h3 { font-family: var(--font-body); font-size: 1.02rem; margin: 0 0 4px; } .video-card .video-meta span { font-size: .85rem; color: var(--muted); } .video-placeholder { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; background: radial-gradient(circle at 50% 40%, rgba(212,175,55,.22), transparent 65%), linear-gradient(180deg, #171717, #0b0b0b); color: var(--muted); } .play-ring { width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 14px; background: var(--grad); color: #0a0a0a; box-shadow: 0 0 0 10px rgba(212,175,55,.12); animation: ringPulse 2.6s ease-in-out infinite; } .play-ring svg { width: 30px; height: 30px; margin-left: 4px; } @keyframes ringPulse { 0%,100% { box-shadow: 0 0 0 8px rgba(212,175,55,.12); } 50% { box-shadow: 0 0 0 18px rgba(212,175,55,.05); } } .video-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: -18px 0 30px; } /* ---------- Feature cards ---------- */ .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; } .feature { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; box-shadow: 0 6px 20px rgba(0,0,0,.04); transition: transform .3s var(--ease), box-shadow .3s; } .feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .feature .icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px; background: var(--grad); color: #fff; } .theme-petty .feature .icon { color: #111; } .feature .icon svg { width: 26px; height: 26px; } .feature h3 { font-family: var(--font-body); font-weight: 800; font-size: 1.12rem; } .feature p { color: var(--muted); margin: 0; font-size: .98rem; } /* ---------- Forms ---------- */ .form-card { max-width: 640px; margin: 0 auto; background: var(--bg); border: 1px solid var(--border); border-radius: 24px; padding: clamp(24px, 5vw, 44px); box-shadow: var(--shadow); } .theme-ldm .form-card { background: var(--surface); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-grid .full { grid-column: 1 / -1; } @media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } } label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 6px; } input[type=text], input[type=email], input[type=tel], input[type=search], select, textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--text); background: var(--bg); border: 1.5px solid var(--border); border-radius: 12px; padding: 13px 14px; transition: border-color .2s, box-shadow .2s; } .theme-ldm input, .theme-ldm select, .theme-ldm textarea { background: #0d0d0d; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); } textarea { min-height: 140px; resize: vertical; } .checks { display: grid; gap: 10px; } .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: .96rem; cursor: pointer; } .check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); flex: none; } .fine { font-size: .82rem; color: var(--muted); margin: 14px 0 0; } .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .form-status { display: none; margin-top: 16px; padding: 14px 16px; border-radius: 12px; font-weight: 600; } .form-status.ok { display: block; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); border: 1px solid var(--accent); } .form-status.err { display: block; background: #fdecec; color: #8a1111; border: 1px solid #f1b5b5; } .form-card button[type=submit] { width: 100%; margin-top: 22px; } /* ---------- Facts ---------- */ .fotd { position: relative; max-width: 860px; margin: -70px auto 0; z-index: 2; background: #fff; color: var(--text); border-radius: 26px; padding: clamp(26px, 5vw, 48px); box-shadow: var(--shadow-lg); border: 1px solid var(--border); } .fotd .badge { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); white-space: nowrap; } .fotd blockquote { margin: 10px 0 18px; font-size: clamp(1.25rem, 3vw, 1.75rem); line-height: 1.4; font-weight: 700; text-align: center; } .fotd .meta { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--grad); color: var(--accent-ink); font: 800 .75rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; } .chip-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 30px; } .chip { border: 1.5px solid var(--border); background: var(--bg); color: var(--text); border-radius: 999px; padding: 9px 16px; font: 700 .9rem/1 var(--font-body); cursor: pointer; transition: all .2s; } .chip:hover { border-color: var(--accent); color: var(--accent); } .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .fact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; } .fact { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 12px; animation: rise .5s var(--ease) both; } .fact p { margin: 0; font-weight: 500; } .fact .fact-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; } .tag { font: 800 .7rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .icon-btn { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 6px 12px; font: 600 .8rem/1 var(--font-body); cursor: pointer; transition: all .2s; } .icon-btn:hover { color: var(--accent); border-color: var(--accent); } .center { text-align: center; } .mt { margin-top: 30px; } /* ---------- Petty: shoutouts ---------- */ .name-of-day { max-width: 760px; margin: -70px auto 0; position: relative; z-index: 2; text-align: center; background: #fff; border-radius: 26px; box-shadow: var(--shadow-lg); overflow: hidden; border: 3px solid #111; } .name-of-day .tag-top { background: var(--accent); color: #111; padding: 16px 20px 12px; } .name-of-day .tag-top strong { display: block; font: 900 clamp(1.6rem, 4vw, 2.3rem)/1 var(--font-display); letter-spacing: .04em; } .name-of-day .tag-top span { font-weight: 700; font-size: .95rem; } .name-of-day .tag-body { padding: 26px 24px 30px; } .name-of-day .the-name { font: 400 clamp(2.6rem, 9vw, 4.6rem)/1 "Permanent Marker", "Comic Sans MS", cursive; color: #111; margin: 0 0 12px; } .name-of-day .the-line { font-size: 1.15rem; color: #333; margin: 0; } .search-wrap { max-width: 460px; margin: 0 auto 30px; position: relative; } .search-wrap svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); } .search-wrap input { padding-left: 44px; } .shout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; } .shout { background: #fff; border: 2px solid #111; border-radius: 16px; overflow: hidden; animation: rise .5s var(--ease) both; transition: transform .3s var(--ease), box-shadow .3s; } .shout:hover { transform: rotate(-1deg) translateY(-3px); box-shadow: 6px 6px 0 var(--accent); } .shout .hello { background: var(--accent); color: #111; padding: 8px 14px; font: 900 .8rem/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; } .shout .hello small { display: block; font-weight: 600; letter-spacing: 0; text-transform: none; font-size: .75rem; } .shout .n { font: 400 2rem/1.1 "Permanent Marker", cursive; padding: 14px 16px 4px; color: #111; } .shout p { padding: 0 16px 16px; margin: 0; color: #333; font-size: .96rem; } .empty { text-align: center; color: var(--muted); padding: 30px; grid-column: 1 / -1; } /* ---------- Petty: shop ---------- */ .shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; } .product { background: #fff; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s; } .product:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .product .shot { aspect-ratio: 1 / 1; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #fff 0%, #ffe6cf 70%); position: relative; } .product .shot svg { width: 72%; height: 72%; transition: transform .5s var(--ease); } .product:hover .shot svg { transform: scale(1.06) rotate(-2deg); } .product .ribbon { position: absolute; top: 14px; left: 14px; background: #111; color: #fff; font: 800 .7rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; } .product .info { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .product h3 { font-family: var(--font-body); font-weight: 800; font-size: 1.08rem; margin: 0; } .product .desc { color: var(--muted); font-size: .92rem; margin: 0 0 8px; } .product .row { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .product .price { font: 900 1.25rem/1 var(--font-body); } .product .btn { padding: 11px 18px; font-size: .9rem; } .btn-dark { background: #111; color: #fff; } .btn-dark:hover { background: var(--accent); color: #111; } .btn[aria-disabled="true"] { background: #e8e1da; color: #6b5f55; cursor: default; transform: none; } /* ---------- CTA band ---------- */ .cta-band { background: var(--grad); color: var(--accent-ink); border-radius: 28px; padding: clamp(32px, 6vw, 60px); text-align: center; box-shadow: var(--shadow-lg); } .cta-band h2 { color: var(--accent-ink); } .cta-band p { max-width: 620px; margin: 0 auto 24px; font-size: 1.08rem; } .cta-band .btn { background: var(--accent-ink); color: var(--accent); } .theme-ldm .cta-band .btn { background: #0a0a0a; color: #f5d97a; } .theme-petty .cta-band .btn { background: #111; color: #fff; } /* ---------- Instagram strip ---------- */ .ig-strip { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; text-align: left; } .ig-strip .ig-icon { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); } .ig-strip .ig-icon svg { width: 30px; height: 30px; } /* ---------- Prose (legal / about) ---------- */ .page-hero { background: var(--hero-bg); color: var(--hero-text); text-align: center; padding: 64px 0 56px; } .page-hero svg.mini { width: 88px; height: 88px; margin: 0 auto 14px; } .page-hero h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); margin: 0 0 8px; } .theme-ldm .page-hero h1 { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .page-hero p { color: var(--muted); margin: 0; } .prose { max-width: 780px; margin: 0 auto; } .prose h2 { font-size: 1.5rem; margin-top: 2em; color: var(--accent-2); } .prose h3 { font-family: var(--font-body); font-size: 1.1rem; margin-top: 1.4em; } .prose p, .prose li { color: #ddd6c6; } .prose ul { padding-left: 1.2em; } .prose li { margin-bottom: .4em; } .prose a { color: var(--accent-2); text-decoration: underline; } .contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 30px; align-items: start; } @media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } } .info-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 28px; } .info-card h3 { font-family: var(--font-body); font-size: 1.05rem; margin: 18px 0 4px; } .info-card h3:first-child { margin-top: 0; } .info-card p { color: var(--muted); margin: 0; } .brand-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .brand-list a { display: flex; align-items: center; gap: 12px; color: var(--text); padding: 10px 12px; border-radius: 12px; background: var(--surface-2); } .brand-list a:hover { text-decoration: none; background: rgba(212,175,55,.16); } .brand-list svg { width: 38px; height: 38px; flex: none; } /* ---------- Footer ---------- */ .footer { background: var(--footer-bg); color: var(--footer-text); padding: 56px 0 30px; font-size: .95rem; } .footer a { color: var(--footer-text); } .footer a:hover { color: #fff; } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; } @media (max-width: 760px) { .footer-top { grid-template-columns: 1fr; } } .footer h4 { font-family: var(--font-body); color: #fff; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 14px; } .footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .footer-brand { display: flex; align-items: center; gap: 12px; color: #fff; font: 700 1.05rem/1.2 var(--font-body); margin-bottom: 12px; } .footer-brand svg { width: 44px; height: 44px; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding-top: 22px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: .85rem; } .footer-bottom .legal { display: flex; flex-wrap: wrap; gap: 6px 16px; } /* ---------- Toast ---------- */ .toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%); background: #111; color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: .92rem; z-index: 100; transition: transform .35s var(--ease); box-shadow: var(--shadow-lg); } .toast.show { transform: translate(-50%, 0); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } } /* home hero logo wrapper (float + shine sweep) */ .hero .shine { margin: 0 auto 22px; animation: floaty 6s ease-in-out infinite; filter: drop-shadow(0 18px 40px rgba(212,175,55,.25)); } .hero .shine .hero-logo { margin: 0; animation: none; filter: none; } .network-grid { display: flex; flex-wrap: wrap; justify-content: center; } .network-grid .site-card { flex: 1 1 300px; max-width: 364px; } .check { display: block; position: relative; padding-left: 30px; } .check input { position: absolute; left: 0; top: 2px; margin: 0; } /* leave room for cards that overlap the hero */ .hero:has(+ section .fotd), .hero:has(+ section .name-of-day) { padding-bottom: 140px; }