/* ========================================================================== TODDLmusic.com — custom theme Mirrors the One Page Express look: uppercase Source Sans headings, Montserrat body, sky-blue (#03A9F4) + green (#4CAF50) accents, angled section dividers, white cards with colored circular icons. Layered on top of Bootstrap 5.3.3 (loaded via CDN before this file). ========================================================================== */ :root { --tl-red: #9E1015; --tl-blue: #03A9F4; --tl-blue-d: #0288d1; --tl-green: #4CAF50; --tl-green-d:#388e3c; --tl-dark: #263238; --tl-slate: #37474f; --tl-muted: #607d8b; --tl-bg: #ffffff; --tl-bg-alt: #f5f8fa; --tl-border: #e3eaef; --tl-head: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; --tl-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif; } /* ---- DARK THEME (toggled via data-bs-theme="dark" on ) -------------- */ :root[data-bs-theme="dark"] { --tl-dark: #eef3f6; /* headings + logo text become light */ --tl-slate: #c7d2d9; /* body text */ --tl-muted: #8fa3ad; --tl-bg: #12171c; --tl-bg-alt: #191f26; --tl-border: #29323b; } :root[data-bs-theme="dark"] .navbar { background: rgba(18,23,28,.96); box-shadow: 0 2px 14px rgba(0,0,0,.45); } :root[data-bs-theme="dark"] .tl-card, :root[data-bs-theme="dark"] .post-card { background: #1b222a; } :root[data-bs-theme="dark"] .hero::after { background: var(--tl-bg); } :root[data-bs-theme="dark"] .album-cover, :root[data-bs-theme="dark"] .post-body img { box-shadow: 0 10px 28px rgba(0,0,0,.5); } * { scroll-behavior: smooth; } body { font-family: var(--tl-body); color: var(--tl-slate); background: var(--tl-bg); line-height: 1.7; -webkit-font-smoothing: antialiased; } h1,h2,h3,h4,h5,h6, .tl-head { font-family: var(--tl-head); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tl-dark); line-height: 1.2; } a { color: var(--tl-blue-d); text-decoration: none; } a:hover { color: var(--tl-blue); } .text-blue { color: var(--tl-blue) !important; } .text-green { color: var(--tl-green) !important; } .bg-blue { background: var(--tl-blue) !important; } .bg-green { background: var(--tl-green) !important; } .bg-alt { background: var(--tl-bg-alt) !important; } /* ---- Buttons -------------------------------------------------------------- */ .btn { font-family: var(--tl-head); text-transform: uppercase; letter-spacing:.06em; font-weight: 700; border-radius: 2rem; padding: .6rem 1.6rem; } .btn-blue { background: var(--tl-blue); border-color: var(--tl-blue); color:#fff; } .btn-blue:hover { background: var(--tl-blue-d); border-color: var(--tl-blue-d); color:#fff; } .btn-green { background: var(--tl-green); border-color: var(--tl-green); color:#fff; } .btn-green:hover { background: var(--tl-green-d); border-color: var(--tl-green-d); color:#fff; } .btn-outline-blue { border:2px solid var(--tl-blue); color: var(--tl-blue-d); background:transparent; } .btn-outline-blue:hover { background: var(--tl-blue); color:#fff; } /* ---- Navbar --------------------------------------------------------------- */ .navbar { background: rgba(255,255,255,.96); backdrop-filter: saturate(180%) blur(8px); box-shadow: 0 2px 14px rgba(38,50,56,.06); } .navbar-brand { font-family: var(--tl-head); font-weight:900; letter-spacing:.04em; text-transform: none; color: var(--tl-dark)!important; font-size:1.9rem; line-height:1; padding-top:0; padding-bottom:0; margin-top:-.15rem; margin-bottom:-.15rem; } .navbar-brand .brand-toddl { color: var(--tl-red); font-weight:900; } .navbar-brand .brand-music { color: var(--tl-dark); font-weight:600; } .navbar .nav-link { font-family: var(--tl-head); text-transform: uppercase; letter-spacing:.05em; font-weight:600; font-size:.85rem; color: var(--tl-slate)!important; } .navbar .nav-link:hover, .navbar .nav-link.active { color: var(--tl-blue)!important; } /* ---- Hero ----------------------------------------------------------------- */ .hero { position: relative; color: #fff; padding: 9rem 0 11rem; background: linear-gradient(rgba(20,14,24,.62), rgba(20,14,24,.62)), url("../img/art-2340062_1280.jpg") center 30% / cover no-repeat; overflow: hidden; } /* angled white divider at the bottom, like the original One Page Express hero */ .hero::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:90px; background:#fff; clip-path: polygon(0 100%, 100% 15%, 100% 100%); } .hero h1 { color:#fff; font-weight:800; font-size: clamp(2.3rem, 6.5vw, 4.4rem); letter-spacing:.01em; text-shadow:0 2px 20px rgba(0,0,0,.45); line-height:1.08; } .hero .lead { font-family: var(--tl-body); text-transform:none; letter-spacing:0; font-size: clamp(1.05rem,2.2vw,1.4rem); opacity:.96; text-shadow:0 1px 12px rgba(0,0,0,.5); } .hero-badge { font-family: var(--tl-head); text-transform: uppercase; letter-spacing:.22em; font-size:clamp(1.1rem, 2.4vw, 1.6rem); font-weight:700; opacity:.95; text-shadow:0 1px 10px rgba(0,0,0,.5); } /* ---- Angled section dividers --------------------------------------------- */ .section { padding: 1.75rem 0; position: relative; } .section-alt { background: var(--tl-bg-alt); } /* horizontal divider line between big sections, with tight top/bottom spacing */ .section + .section { border-top: 2px solid var(--tl-border); } .skew-top { position:relative; } .skew-top::before { content:""; position:absolute; top:-40px; left:0; right:0; height:40px; background: inherit; clip-path: polygon(0 100%, 100% 0, 100% 100%); } .section-title { text-align:center; margin-bottom: 3rem; } .section-title .eyebrow { display:block; color: var(--tl-blue); letter-spacing:.22em; font-size:clamp(1.2rem, 2.6vw, 1.8rem); font-weight:700; margin-bottom:.6rem; } .section-title h2 { font-size: clamp(1.6rem, 3.75vw, 2.7rem); font-weight:800; letter-spacing:.02em; } .section-title .rule { width:64px; height:4px; background: var(--tl-green); border:0; margin:1rem auto 0; opacity:1; border-radius:2px; } /* ---- Cards ---------------------------------------------------------------- */ .tl-card { background:#fff; border:1px solid var(--tl-border); border-radius:14px; padding:2rem 1.5rem; height:100%; text-align:center; transition: transform .2s ease, box-shadow .2s ease; } .tl-card:hover { transform: translateY(-6px); box-shadow:0 14px 30px rgba(38,50,56,.12); } .tl-icon { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 1.2rem; color:#fff; font-size:1.6rem; background: var(--tl-blue); } .tl-icon.green { background: var(--tl-green); } .tl-card h4 { font-size:1.05rem; margin-bottom:.6rem; } .tl-card p { color: var(--tl-muted); font-size:.95rem; } /* ---- Video project thumbnails -------------------------------------------- */ .vid-card { position:relative; border-radius:14px; overflow:hidden; display:block; box-shadow:0 6px 18px rgba(38,50,56,.10); background:#000; } .vid-card img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; transition: transform .4s ease, opacity .3s ease; opacity:.92; } .vid-card:hover img { transform: scale(1.06); opacity:.7; } .vid-card .vid-label { position:absolute; left:0; right:0; bottom:0; padding:1rem .9rem .9rem; background: linear-gradient(to top, rgba(2,40,60,.92), transparent); color:#fff; font-family: var(--tl-head); text-transform:uppercase; letter-spacing:.04em; font-weight:700; font-size:.9rem; text-align:left; } .vid-card .vid-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; color:var(--tl-blue-d); font-size:1.4rem; opacity:0; transition:opacity .25s ease; } .vid-card:hover .vid-play { opacity:1; } /* ---- Album blocks --------------------------------------------------------- */ .album-cover { border-radius:16px; box-shadow:0 18px 40px rgba(38,50,56,.18); } .stream-links a { display:inline-flex; align-items:center; gap:.4rem; margin:.25rem .5rem .25rem 0; font-family:var(--tl-head); text-transform:uppercase; font-size:.8rem; letter-spacing:.05em; font-weight:700; padding:.4rem 1rem; border-radius:2rem; border:2px solid var(--tl-border); color:var(--tl-slate); } .stream-links a:hover { border-color:var(--tl-blue); color:var(--tl-blue); } /* ---- Blog cards ----------------------------------------------------------- */ .post-card { background:#fff; border:1px solid var(--tl-border); border-radius:14px; overflow:hidden; height:100%; transition: transform .2s, box-shadow .2s; } .post-card:hover { transform:translateY(-5px); box-shadow:0 14px 30px rgba(38,50,56,.12); } .post-card .pc-body { padding:1.4rem 1.4rem 1.6rem; } .post-card .pc-date { color:var(--tl-blue); font-family:var(--tl-head); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; } .post-card h3 { font-size:1.1rem; margin:.4rem 0 .6rem; } .post-card p { color:var(--tl-muted); font-size:.92rem; margin-bottom:1rem; } .post-thumb { aspect-ratio:16/9; width:100%; object-fit:cover; background:var(--tl-bg-alt); } .post-thumb.placeholder { display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--tl-blue),var(--tl-green)); color:#fff; font-family:var(--tl-head); font-size:2rem; letter-spacing:.1em; } /* ---- About collage (portrait + 2 overlapping side pics) ------------------ */ .about-collage { position:relative; max-width:720px; margin:2.5rem auto 3.5rem; } .about-collage .ac-main { display:block; width:100%; border-radius:10px; box-shadow:0 20px 48px rgba(38,50,56,.30); transform:rotate(-1.2deg); position:relative; z-index:1; } .about-collage .ac-side { position:absolute; border-radius:8px; box-shadow:0 14px 32px rgba(38,50,56,.32); z-index:2; background:#fff; } .about-collage .ac-tl { width:40%; top:16%; left:calc(-8% - 1in); transform:rotate(-4deg); } .about-collage .ac-br { width:46%; bottom:calc(-9% + 2in); right:calc(-7% - 1in); transform:rotate(3.5deg); } @media (max-width:575.98px){ .about-collage { max-width:440px; text-align:center; } .about-collage .ac-main { transform:none; } .about-collage .ac-side { position:static; width:62%; display:inline-block; margin:.85rem .35rem 0; transform:none; } } /* ---- Greatest Show promo -------------------------------------------------- */ .tgs-promo { background:linear-gradient(135deg,#10233b 0%,#1b3a5f 100%); color:#fff; border-radius:18px; overflow:hidden; } .tgs-promo h2, .tgs-promo h5 { color:#fff; } .tgs-promo .eyebrow { color:#7fd3ff; letter-spacing:.25em; font-size:.8rem; } /* ---- Costa Rica strip ----------------------------------------------------- */ .cr-strip { background:var(--tl-bg-alt); border-radius:16px; } /* ---- Post article body ---------------------------------------------------- */ .post-hero { background:linear-gradient(135deg,#0288d1,#03A9F4 60%,#4CAF50 150%); color:#fff; padding:5rem 0 3.5rem; } .post-hero h1 { color:#fff; font-size:clamp(1.8rem,4.5vw,2.8rem); } .post-hero .meta { font-family:var(--tl-head); letter-spacing:.15em; text-transform:uppercase; font-size:.8rem; opacity:.9; } .post-body { font-size:1.06rem; } .post-body p { margin-bottom:1.2rem; } .post-body img { max-width:100%; height:auto; border-radius:12px; margin:1.2rem 0; box-shadow:0 8px 24px rgba(38,50,56,.12); } .post-body figure { margin:1.5rem 0; } .post-body figcaption { text-align:center; color:var(--tl-muted); font-size:.9rem; margin-top:.5rem; } .post-body h2 { font-size:1.4rem; margin:2rem 0 1rem; } .post-body ul, .post-body ol { margin-bottom:1.2rem; } .post-body li { margin-bottom:.4rem; } /* Responsive 16:9 embed wrapper (fallback if Bootstrap ratio not used) */ .embed-wrap { position:relative; width:100%; padding-top:56.25%; border-radius:12px; overflow:hidden; box-shadow:0 10px 30px rgba(38,50,56,.18); margin:1.5rem 0; background:#000; } .embed-wrap.vertical { padding-top:130%; max-width:420px; margin-inline:auto; } .embed-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; } /* ---- Footer --------------------------------------------------------------- */ .tl-footer { background:#1a2228; color:#b0bec5; padding:3.5rem 0 2rem; } .tl-footer a { color:#cfd8dc; } .tl-footer a:hover { color:var(--tl-blue); } .tl-footer h5 { color:#fff; font-size:1rem; margin-bottom:1rem; } .tl-footer .brand { font-family:var(--tl-head); font-weight:900; color:#fff; font-size:1.4rem; letter-spacing:.04em; } .tl-footer .brand .brand-toddl { color:var(--tl-red); font-weight:900; } .tl-footer .brand .brand-music { color:#fff; font-weight:600; } .footer-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:2rem; padding-top:1.5rem; font-size:.85rem; color:#78909c; } /* ---- Utilities ------------------------------------------------------------ */ .anchor-offset { scroll-margin-top:80px; } .lead-narrow { max-width:720px; margin-inline:auto; }