/* Theme Name: DogCareTrainingFun Theme URI: https://dogcaretrainingfun.com/ Author: DogCareTrainingFun Author URI: https://dogcaretrainingfun.com/ Description: Friendly, vet-informed dog care, training, and fun. A soft & organic, mobile-first blog/affiliate theme with a teal & gold palette. Converted from the DogCareTrainingFun static site. Includes a marketing front page, blog index, About & Newsletter/Contact templates, plus Shop, Product, Account/Rewards, Login, Sign-up, Payout Method and Legal page templates. Version: 1.1.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: dogcaretrainingfun Tags: blog, two-columns, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready */ /* ════════════════════════════════════════════════════════════════════ DogCareTrainingFun.com — Shared stylesheet (updated: shop, account, rewards, auth, legal & payout components added) ════════════════════════════════════════════════════════════════════ */ :root { /* ── COLORS ── */ --teal: #1F4E5F; /* primary — trust & expertise */ --teal-light: #2A6478; --teal-dark: #153848; --gold: #F2A33A; /* secondary — friendly energy */ --gold-light: #F5B55E; --gold-dark: #D4891F; --orange: #F26A3D; /* accent — warmth & connection */ --orange-dark: #D95A30; --cream: #F7F4EF; /* page background */ --charcoal: #2E2E2E; /* body text */ --white: #FFFFFF; --gray-200: #E8E4DE; --gray-400: #9E9992; --gray-600: #6B6760; /* semantic roles */ --bg: var(--cream); --bg-elevated: var(--white); --fg1: var(--charcoal); --fg2: var(--gray-600); --fg3: var(--gray-400); --fg-on-dark: var(--white); --fg-on-dark-2:rgba(247,244,239,.72); --border: var(--gray-200); --link: var(--teal); --link-hover: var(--teal-light); --focus-ring: rgba(242,163,58,.55); /* ── FONTS ── */ --font-primary: 'Poppins', system-ui, sans-serif; /* headings */ --font-secondary: 'Montserrat', system-ui, sans-serif; /* labels */ --font-body: 'Inter', system-ui, sans-serif; /* body */ /* ── SPACING (8px scale) ── */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; /* ── RADIUS ── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* ── SHADOWS (teal-tinted, never neutral black) ── */ --shadow-sm: 0 1px 3px rgba(31,78,95,.12), 0 1px 2px rgba(31,78,95,.08); --shadow-md: 0 4px 12px rgba(31,78,95,.16), 0 2px 4px rgba(31,78,95,.08); --shadow-lg: 0 12px 32px rgba(31,78,95,.20), 0 4px 8px rgba(31,78,95,.10); --glow-gold: 0 6px 20px rgba(242,163,58,.40); --glow-orange: 0 6px 20px rgba(242,106,61,.40); /* ── MOTION & LAYOUT ── */ --transition: 0.22s cubic-bezier(.4, 0, .2, 1); --content-max: 1100px; --gutter: 20px; /* mobile gutter; widened on desktop below */ } /* ════════════════════════════ RESET ════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background: var(--bg); color: var(--fg1); line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; } ul { list-style: none; } /* visible keyboard focus everywhere (WCAG AA) */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: var(--radius-sm); } .skip-link { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--teal); color: #fff; padding: 10px 18px; border-radius: var(--radius-md); font-family: var(--font-secondary); font-weight: 600; } .skip-link:focus { left: 8px; } /* ════════════════════════════ LAYOUT ════════════════════════════ */ .wrap { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: var(--space-2xl) 0; } .section-sm { padding: var(--space-xl) 0; } .eyebrow { font-family: var(--font-secondary); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dark); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; } .eyebrow svg { width: 16px; height: 16px; } .sec-head { max-width: 640px; margin: 0 auto var(--space-xl); text-align: center; } .sec-head.left { margin-left: 0; text-align: left; } .sec-title { font-family: var(--font-primary); font-weight: 700; font-size: clamp(1.7rem, 5vw, 2.2rem); color: var(--teal-dark); letter-spacing: -.02em; line-height: 1.18; text-wrap: balance; } .sec-sub { color: var(--fg2); margin-top: 12px; font-size: 1.02rem; text-wrap: pretty; } /* ════════════════════════════ BUTTONS ════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-primary); font-weight: 600; text-align: center; border-radius: var(--radius-md); border: 2px solid transparent; transition: all var(--transition); white-space: nowrap; } .btn svg { width: 1.15em; height: 1.15em; } .btn-lg { padding: 15px 30px; font-size: 1rem; } .btn-md { padding: 11px 22px; font-size: .92rem; } .btn-primary { background: var(--teal); color: #fff; } .btn-primary:hover { background: var(--teal-light); box-shadow: var(--shadow-md); transform: translateY(-2px); } .btn-gold { background: var(--gold); color: #fff; } .btn-gold:hover { background: var(--gold-dark); box-shadow: var(--glow-gold); transform: translateY(-2px); } .btn-orange { background: var(--orange); color: #fff; } .btn-orange:hover { background: var(--orange-dark); box-shadow: var(--glow-orange); transform: translateY(-2px); } .btn-outline { background: transparent; color: var(--teal); border-color: var(--teal); } .btn-outline:hover { background: var(--teal); color: #fff; } .btn-ghost-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.28); } .btn-ghost-light:hover { background: rgba(255,255,255,.22); transform: translateY(-2px); } .btn-block { width: 100%; } /* ════════════════════════════ HEADER ════════════════════════════ */ .hdr { position: sticky; top: 0; z-index: 50; background: rgba(247,244,239,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .hdr-in { display: flex; align-items: center; gap: var(--space-md); height: 70px; } .brand { display: flex; align-items: center; gap: 11px; } .brand img { width: 42px; height: 42px; border-radius: 50%; box-shadow: var(--shadow-sm); } .brand .name { font-family: var(--font-primary); font-weight: 800; font-size: 1.12rem; color: var(--teal-dark); letter-spacing: -.02em; line-height: 1; } .brand .name span { color: var(--gold); } .nav { display: none; gap: 4px; margin-left: auto; } .nav a { font-family: var(--font-secondary); font-weight: 600; font-size: .85rem; color: var(--fg2); padding: 9px 15px; border-radius: var(--radius-md); transition: all var(--transition); } .nav a:hover { color: var(--teal); background: rgba(31,78,95,.07); } .nav a[aria-current="page"] { color: var(--teal); background: rgba(31,78,95,.1); } .hdr-cta { margin-left: auto; } .nav + .hdr-cta { margin-left: var(--space-md); } .hdr-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } .hdr-icon { display: none; width: 42px; height: 42px; border-radius: 50%; align-items: center; justify-content: center; flex: none; background: rgba(31,78,95,.08); color: var(--teal); transition: all var(--transition); } .hdr-icon svg { width: 20px; height: 20px; } .hdr-icon:hover { background: var(--teal); color: #fff; transform: translateY(-1px); } .hdr-icon[aria-current="page"] { background: var(--teal); color: #fff; } @media (min-width: 560px) { .hdr-icon { display: flex; } } /* ════════════════════════════ HERO ════════════════════════════ */ .hero { background: var(--teal); position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 80% 120%, rgba(242,163,58,.24) 0%, transparent 62%); } .hero-in { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: center; padding: var(--space-2xl) 0; } .hero-copy { text-align: center; } .badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(242,163,58,.18); border: 1px solid rgba(242,163,58,.38); color: var(--gold-light); font-family: var(--font-secondary); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 6px 15px; border-radius: var(--radius-pill); margin-bottom: var(--space-md); } .badge svg { width: 14px; height: 14px; } .hero h1 { font-family: var(--font-primary); font-weight: 800; font-size: clamp(2.1rem, 8vw, 3.3rem); line-height: 1.05; letter-spacing: -.03em; color: #fff; margin-bottom: var(--space-md); text-wrap: balance; } .hero h1 span { color: var(--gold); } .hero p { font-size: 1.06rem; color: var(--fg-on-dark-2); max-width: 48ch; margin: 0 auto var(--space-lg); text-wrap: pretty; } .hero-cta { display: flex; gap: var(--space-md); flex-wrap: wrap; justify-content: center; } .hero-art { justify-self: center; position: relative; } .hero-art img { width: clamp(220px, 60vw, 300px); aspect-ratio: 1; border-radius: 50%; border: 4px solid rgba(242,163,58,.5); box-shadow: 0 0 0 14px rgba(242,163,58,.12); } .hero-stats { display: flex; gap: var(--space-lg); justify-content: center; margin-top: var(--space-xl); flex-wrap: wrap; } .hero-stat { text-align: center; } .hero-stat b { display: block; font-family: var(--font-primary); font-weight: 800; font-size: 1.7rem; color: var(--gold); line-height: 1; } .hero-stat span { font-family: var(--font-secondary); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-on-dark-2); } /* ════════════════════════════ PILLARS (icon cards) ════════════════════════════ */ .pillars { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); } .pillar { background: #fff; border-radius: var(--radius-xl); padding: var(--space-lg); box-shadow: var(--shadow-sm); border-left: 4px solid var(--teal); transition: transform var(--transition), box-shadow var(--transition); } .pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .pillar.gold { border-left-color: var(--gold); } .pillar.orange { border-left-color: var(--orange); } .pillar-ico { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-md); color: var(--teal); background: rgba(31,78,95,.1); } .pillar.gold .pillar-ico { color: var(--gold-dark); background: rgba(242,163,58,.16); } .pillar.orange .pillar-ico { color: var(--orange-dark); background: rgba(242,106,61,.12); } .pillar-ico svg { width: 26px; height: 26px; } .pillar h3 { font-family: var(--font-primary); font-size: 1.2rem; font-weight: 700; color: var(--teal-dark); margin-bottom: 8px; } .pillar p { font-size: .92rem; color: var(--fg2); } .pillar a { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-md); font-family: var(--font-secondary); font-weight: 700; font-size: .82rem; color: var(--teal); transition: gap var(--transition); } .pillar a:hover { gap: 11px; } .pillar a svg { width: 16px; height: 16px; } .pillar.gold a { color: var(--gold-dark); } .pillar.orange a { color: var(--orange-dark); } /* ════════════════════════════ ARTICLE CARDS ════════════════════════════ */ .grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); } .card { background: #fff; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); display: flex; flex-direction: column; } .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .card-thumb { height: 190px; display: flex; align-items: center; justify-content: center; font-size: 3.4rem; position: relative; color: rgba(255,255,255,.92); } /* on-brand gradient placeholders */ .thumb-teal { background: linear-gradient(135deg, var(--teal) 0%, var(--teal-light) 100%); } .thumb-gold { background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-light) 100%); } .thumb-orange { background: linear-gradient(135deg, var(--orange-dark) 0%, var(--gold) 100%); } .thumb-mix { background: linear-gradient(135deg, var(--teal) 0%, var(--orange) 120%); } .card-fav { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; color: var(--orange); box-shadow: var(--shadow-sm); } .card-fav svg { width: 18px; height: 18px; } .card-body { padding: var(--space-lg); display: flex; flex-direction: column; flex: 1; } .tag { align-self: flex-start; font-family: var(--font-secondary); font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 4px 12px; border-radius: var(--radius-pill); margin-bottom: 12px; background: rgba(31,78,95,.1); color: var(--teal); } .tag.gold { background: rgba(242,163,58,.16); color: var(--gold-dark); } .tag.orange { background: rgba(242,106,61,.12); color: #c0512a; } .card-body h3 { font-family: var(--font-primary); font-size: 1.12rem; font-weight: 700; color: var(--teal-dark); margin-bottom: 9px; line-height: 1.3; } .card-body p { font-size: .9rem; color: var(--fg2); line-height: 1.6; } .card-meta { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: var(--space-md); font-family: var(--font-secondary); font-size: .74rem; color: var(--fg3); font-weight: 600; } .card-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg3); } /* ════════════════════════════ CATEGORY PILLS ════════════════════════════ */ .pills { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .pills.left { justify-content: flex-start; } .pill { font-family: var(--font-secondary); font-weight: 600; font-size: .85rem; padding: 9px 18px; border-radius: var(--radius-pill); background: #fff; color: var(--fg2); border: 1px solid var(--border); transition: all var(--transition); } .pill:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-1px); } .pill[aria-current="true"] { background: var(--teal); color: #fff; border-color: var(--teal); } /* ════════════════════════════ PROCESS TIMELINE ════════════════════════════ */ .timeline { position: relative; max-width: 760px; margin: 0 auto; } .timeline::before { content: ''; position: absolute; left: 23px; top: 12px; bottom: 12px; width: 3px; background: linear-gradient(var(--gold), var(--orange)); border-radius: 3px; } .tl-step { position: relative; padding: 0 0 var(--space-xl) 64px; } .tl-step:last-child { padding-bottom: 0; } .tl-num { position: absolute; left: 0; top: 0; width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 3px solid var(--gold); display: flex; align-items: center; justify-content: center; font-family: var(--font-primary); font-weight: 800; color: var(--teal-dark); box-shadow: var(--shadow-sm); z-index: 1; } .tl-step:nth-child(even) .tl-num { border-color: var(--orange); } .tl-card { background: #fff; border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-sm); } .tl-when { font-family: var(--font-secondary); font-weight: 700; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-dark); } .tl-card h3 { font-family: var(--font-primary); font-size: 1.15rem; font-weight: 700; color: var(--teal-dark); margin: 4px 0 8px; } .tl-card p { font-size: .92rem; color: var(--fg2); } /* ════════════════════════════ COMPARISON TABLE ════════════════════════════ */ .compare-wrap { overflow-x: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } table.compare { width: 100%; border-collapse: collapse; background: #fff; min-width: 460px; } table.compare caption { position: absolute; left: -9999px; } table.compare th, table.compare td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--border); } table.compare thead th { font-family: var(--font-primary); font-weight: 700; font-size: .92rem; color: var(--teal-dark); background: var(--cream); border-bottom: 2px solid var(--border); } table.compare thead th.col-us { color: #fff; background: var(--teal); } table.compare tbody th { font-family: var(--font-body); font-weight: 600; font-size: .9rem; color: var(--fg1); } table.compare td { font-size: .88rem; color: var(--fg2); } table.compare td.us { background: rgba(31,78,95,.05); color: var(--teal-dark); font-weight: 600; } table.compare tr:last-child th, table.compare tr:last-child td { border-bottom: none; } .tick { color: var(--gold-dark); display: inline-flex; vertical-align: middle; } .tick svg { width: 20px; height: 20px; } .cross { color: var(--gray-400); display: inline-flex; vertical-align: middle; } .cross svg { width: 18px; height: 18px; } /* ════════════════════════════ STATS ════════════════════════════ */ .stats-band { background: var(--teal); border-radius: var(--radius-xl); position: relative; overflow: hidden; padding: var(--space-2xl) var(--space-lg); } .stats-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 50% -10%, rgba(242,163,58,.2), transparent 70%); } .stats-grid { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl) var(--space-md); text-align: center; } .stat b { display: block; font-family: var(--font-primary); font-weight: 800; font-size: clamp(2rem, 8vw, 2.8rem); color: var(--gold); line-height: 1; } .stat span { font-family: var(--font-secondary); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-on-dark-2); margin-top: 8px; display: block; } /* ════════════════════════════ TESTIMONIALS ════════════════════════════ */ .tgrid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); } .quote { background: #fff; border-radius: var(--radius-xl); padding: var(--space-lg); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; } .quote .stars { color: var(--gold); display: flex; gap: 2px; margin-bottom: 12px; } .quote .stars svg { width: 17px; height: 17px; } .quote p { font-size: .98rem; color: var(--fg1); line-height: 1.65; flex: 1; } .quote footer { display: flex; align-items: center; gap: 12px; margin-top: var(--space-md); } .quote .av { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-primary); font-weight: 700; color: #fff; font-size: .95rem; } .quote .who b { display: block; font-family: var(--font-primary); font-size: .9rem; color: var(--teal-dark); } .quote .who span { font-size: .78rem; color: var(--fg3); } /* ════════════════════════════ FAQ ACCORDION ════════════════════════════ */ .faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .faq details { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow var(--transition); } .faq details[open] { box-shadow: var(--shadow-md); } .faq summary { list-style: none; cursor: pointer; padding: 18px var(--space-lg); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); font-family: var(--font-primary); font-weight: 600; font-size: 1rem; color: var(--teal-dark); } .faq summary::-webkit-details-marker { display: none; } .faq summary .chev { flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(242,163,58,.16); color: var(--gold-dark); display: flex; align-items: center; justify-content: center; transition: transform var(--transition); } .faq summary .chev svg { width: 16px; height: 16px; } .faq details[open] summary .chev { transform: rotate(180deg); } .faq details p { padding: 0 var(--space-lg) 18px; font-size: .94rem; color: var(--fg2); } /* ════════════════════════════ NEWSLETTER PANEL ════════════════════════════ */ .news { background: var(--teal-dark); border-radius: var(--radius-xl); padding: var(--space-2xl) var(--space-lg); position: relative; overflow: hidden; text-align: center; } .news::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(242,163,58,.2), transparent 70%); } .news-in { position: relative; max-width: 560px; margin: 0 auto; } .news h2 { font-family: var(--font-primary); font-size: clamp(1.5rem, 5vw, 1.9rem); font-weight: 700; color: #fff; margin-bottom: 10px; } .news p { color: var(--fg-on-dark-2); margin-bottom: var(--space-lg); } .news-form { display: flex; flex-direction: column; gap: 10px; } .news-form input { flex: 1; padding: 14px 18px; border-radius: var(--radius-md); border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff; font-family: var(--font-body); font-size: .95rem; } .news-form input::placeholder { color: rgba(247,244,239,.55); } .news-form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--focus-ring); } .news-fine { font-size: .76rem; color: var(--fg-on-dark-2); margin-top: 14px; } /* ════════════════════════════ FORM (contact) ════════════════════════════ */ .form-card { background: #fff; border-radius: var(--radius-xl); padding: var(--space-xl) var(--space-lg); box-shadow: var(--shadow-md); } .field { margin-bottom: var(--space-md); } .field label { display: block; font-family: var(--font-secondary); font-weight: 600; font-size: .82rem; color: var(--teal-dark); margin-bottom: 7px; } .field label .req { color: var(--orange); } .field input, .field select, .field textarea { width: 100%; padding: 13px 15px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--cream); color: var(--fg1); font-family: var(--font-body); font-size: .95rem; transition: border-color var(--transition), box-shadow var(--transition); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: #fff; box-shadow: 0 0 0 3px var(--focus-ring); } .field textarea { resize: vertical; min-height: 130px; } .field-hint { font-size: .76rem; color: var(--fg3); margin-top: 6px; } /* ════════════════════════════ VALUES / TEAM ════════════════════════════ */ .values { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); } .value { display: flex; gap: var(--space-md); align-items: flex-start; } .value-ico { flex: none; width: 46px; height: 46px; border-radius: var(--radius-md); background: rgba(31,78,95,.1); color: var(--teal); display: flex; align-items: center; justify-content: center; } .value-ico svg { width: 22px; height: 22px; } .value h3 { font-family: var(--font-primary); font-size: 1.05rem; font-weight: 700; color: var(--teal-dark); margin-bottom: 5px; } .value p { font-size: .9rem; color: var(--fg2); } /* ════════════════════════════ ABOUT HERO / STORY ════════════════════════════ */ .page-hero { background: var(--teal); position: relative; overflow: hidden; padding: var(--space-2xl) 0; text-align: center; } .page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 70% at 30% 120%, rgba(242,163,58,.18), transparent 65%); } .page-hero-in { position: relative; max-width: 720px; margin: 0 auto; } .page-hero h1 { font-family: var(--font-primary); font-weight: 800; font-size: clamp(2rem, 7vw, 2.9rem); line-height: 1.08; letter-spacing: -.02em; color: #fff; margin: var(--space-md) 0; text-wrap: balance; } .page-hero p { color: var(--fg-on-dark-2); font-size: 1.05rem; max-width: 54ch; margin: 0 auto; text-wrap: pretty; } .page-hero .badge { color: var(--gold-light); } .story { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: center; } .story-art { border-radius: var(--radius-xl); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); color: rgba(255,255,255,.9); font-size: 4rem; background: linear-gradient(135deg, var(--teal) 0%, var(--orange) 130%); } .story-copy h2 { font-family: var(--font-primary); font-size: clamp(1.6rem, 5vw, 2rem); font-weight: 700; color: var(--teal-dark); letter-spacing: -.02em; margin-bottom: var(--space-md); } .story-copy p { color: var(--fg2); margin-bottom: var(--space-md); } .story-copy p:last-child { margin-bottom: 0; } /* prose block (about / newsletter intro) */ .prose p { color: var(--fg2); margin-bottom: var(--space-md); } .prose p:last-child { margin-bottom: 0; } /* ════════════════════════════ FOOTER ════════════════════════════ */ .ftr { background: var(--teal-dark); color: var(--fg-on-dark-2); padding: var(--space-2xl) 0 var(--space-lg); margin-top: var(--space-2xl); } .ftr-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); margin-bottom: var(--space-xl); } .ftr .brand .name { color: #fff; } .ftr-about { font-size: .88rem; line-height: 1.7; margin: var(--space-md) 0; max-width: 34ch; } .ftr-col h4 { font-family: var(--font-primary); font-size: .92rem; color: #fff; margin-bottom: var(--space-md); } .ftr-col a, .ftr-col p { display: block; font-size: .88rem; color: var(--fg-on-dark-2); padding: 4px 0; transition: color var(--transition); } .ftr-col a:hover { color: var(--gold-light); } .ftr-social { display: flex; gap: 10px; margin-top: var(--space-md); } .ftr-social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; display: flex; align-items: center; justify-content: center; transition: all var(--transition); } .ftr-social a:hover { background: var(--gold); transform: translateY(-2px); } .ftr-social svg { width: 19px; height: 19px; } .ftr-base { border-top: 1px solid rgba(255,255,255,.12); padding-top: var(--space-lg); text-align: center; font-family: var(--font-secondary); font-size: .78rem; letter-spacing: .03em; display: flex; flex-direction: column; gap: 8px; align-items: center; } .ftr-base strong { color: var(--gold); font-weight: 700; } .ftr-base a:hover { color: var(--gold-light); } /* ════════════════════════════ MISC ════════════════════════════ */ .center { text-align: center; } .mt-xl { margin-top: var(--space-xl); } .alt-bg { background: #fff; } .lead { font-size: 1.12rem; color: var(--fg2); line-height: 1.75; } /* ════════════════════════════ SHOP — PRODUCT CARDS ════════════════════════════ */ .product-card { background: #fff; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform var(--transition), box-shadow var(--transition); position: relative; } .product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .product-thumb { height: 200px; display: flex; align-items: center; justify-content: center; font-size: 4rem; position: relative; } .product-badge { position: absolute; top: 12px; left: 12px; font-family: var(--font-secondary); font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--radius-pill); background: var(--orange); color: #fff; box-shadow: var(--shadow-sm); } .product-badge.gold { background: var(--gold); } .product-badge.teal { background: var(--teal); } .product-body { padding: var(--space-lg); display: flex; flex-direction: column; flex: 1; } .product-body .tag { margin-bottom: 10px; } .product-body h3 { font-family: var(--font-primary); font-size: 1.08rem; font-weight: 700; color: var(--teal-dark); margin-bottom: 8px; line-height: 1.3; } .product-body h3 a { color: inherit; } .product-body h3 a:hover { color: var(--teal); } .product-body p { font-size: .88rem; color: var(--fg2); line-height: 1.55; margin-bottom: var(--space-md); } .rating { display: flex; align-items: center; gap: 7px; margin-bottom: var(--space-md); } .rating .stars { color: var(--gold); display: flex; gap: 1px; } .rating .stars svg { width: 15px; height: 15px; } .rating .count { font-family: var(--font-secondary); font-size: .76rem; color: var(--fg3); font-weight: 600; } .price-row { display: flex; align-items: baseline; gap: 9px; margin-top: auto; margin-bottom: var(--space-md); } .price { font-family: var(--font-primary); font-weight: 800; font-size: 1.4rem; color: var(--teal-dark); } .price-was { font-size: .9rem; color: var(--fg3); text-decoration: line-through; } .affiliate-note { display: flex; align-items: center; gap: 9px; max-width: 640px; margin: 0 auto var(--space-xl); padding: 13px 18px; border-radius: var(--radius-lg); background: rgba(242,163,58,.1); border: 1px solid rgba(242,163,58,.3); font-size: .84rem; color: var(--gold-dark); } .affiliate-note svg { width: 20px; height: 20px; flex: none; } /* ════════════════════════════ PRODUCT DETAIL ════════════════════════════ */ .breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--font-secondary); font-size: .8rem; font-weight: 600; color: var(--fg3); padding: var(--space-lg) 0; } .breadcrumb a { color: var(--teal); } .breadcrumb a:hover { color: var(--gold-dark); } .breadcrumb svg { width: 14px; height: 14px; } .breadcrumb .current { color: var(--fg2); } .pd-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: start; } .pd-gallery { display: grid; gap: var(--space-md); } .pd-main-img { border-radius: var(--radius-xl); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; font-size: 6rem; box-shadow: var(--shadow-md); position: relative; } .pd-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); } .pd-thumb { border-radius: var(--radius-md); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; cursor: pointer; border: 2px solid transparent; transition: border-color var(--transition); } .pd-thumb:hover { border-color: var(--gold); } .pd-info .tag { margin-bottom: 14px; } .pd-info h1 { font-family: var(--font-primary); font-weight: 800; font-size: clamp(1.6rem, 5vw, 2.2rem); color: var(--teal-dark); line-height: 1.15; letter-spacing: -.02em; margin-bottom: 14px; text-wrap: balance; } .pd-info .lead { font-size: 1rem; color: var(--fg2); margin: var(--space-md) 0; } .pd-price-box { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-lg); box-shadow: var(--shadow-sm); margin: var(--space-lg) 0; } .pd-price-box .price-row { margin: 0 0 6px; } .pd-price-box .price { font-size: 1.9rem; } .pd-stock { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-secondary); font-size: .8rem; font-weight: 600; color: #1b7a4b; margin-bottom: var(--space-md); } .pd-stock .dot { width: 8px; height: 8px; border-radius: 50%; background: #1b7a4b; } .pd-actions { display: flex; flex-direction: column; gap: 10px; } .feature-list { display: grid; gap: 12px; margin: var(--space-md) 0; } .feature-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .94rem; color: var(--fg2); } .feature-list .fi { flex: none; width: 24px; height: 24px; border-radius: 50%; background: rgba(31,78,95,.1); color: var(--teal); display: flex; align-items: center; justify-content: center; } .feature-list .fi svg { width: 14px; height: 14px; } table.specs { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } table.specs th, table.specs td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border); font-size: .9rem; } table.specs th { font-family: var(--font-secondary); font-weight: 700; color: var(--teal-dark); background: var(--cream); width: 40%; } table.specs td { color: var(--fg2); } table.specs tr:last-child th, table.specs tr:last-child td { border-bottom: none; } /* ════════════════════════════ ACCOUNT ════════════════════════════ */ .account-greet { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; } .account-avatar { width: 84px; height: 84px; border-radius: 50%; box-shadow: var(--shadow-md); border: 3px solid var(--gold); flex: none; } .account-greet h1 { font-family: var(--font-primary); font-weight: 800; font-size: clamp(1.6rem, 5vw, 2.2rem); color: var(--teal-dark); letter-spacing: -.02em; line-height: 1.1; } .account-greet .meta { font-family: var(--font-secondary); font-size: .85rem; color: var(--fg2); margin-top: 8px; display: flex; gap: 8px 18px; flex-wrap: wrap; } .account-greet .meta span { display: inline-flex; align-items: center; gap: 6px; } .account-greet .meta b { color: var(--teal); font-weight: 700; } .account-greet .meta svg { width: 15px; height: 15px; color: var(--gold-dark); } .account-shell { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: start; } .account-side { display: flex; flex-direction: column; gap: 3px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-sm); box-shadow: var(--shadow-sm); } .account-side a { display: flex; align-items: center; gap: 11px; padding: 12px 15px; border-radius: var(--radius-md); font-family: var(--font-secondary); font-weight: 600; font-size: .9rem; color: var(--fg2); transition: all var(--transition); } .account-side a:hover { background: rgba(31,78,95,.07); color: var(--teal); } .account-side a.active { background: var(--teal); color: #fff; } .account-side a svg { width: 18px; height: 18px; flex: none; } .account-side .divider { height: 1px; background: var(--border); margin: 6px 8px; } .account-side .signout { color: var(--orange-dark); } .account-side .signout:hover { background: rgba(242,106,61,.1); color: var(--orange-dark); } .account-panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: var(--space-xl); margin-bottom: var(--space-lg); scroll-margin-top: 90px; } .account-panel:last-child { margin-bottom: 0; } .account-panel > h2 { font-family: var(--font-primary); font-size: 1.2rem; font-weight: 700; color: var(--teal-dark); margin-bottom: 4px; display: flex; align-items: center; gap: 10px; } .account-panel > h2 svg { width: 20px; height: 20px; color: var(--gold-dark); } .account-panel .panel-sub { font-size: .88rem; color: var(--fg2); margin-bottom: var(--space-lg); } .account-panel .panel-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--border); } /* avatar edit row */ .avatar-edit { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); } .avatar-edit img { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--gold); } /* CSS-only toggle switch */ .switch { position: relative; display: inline-flex; flex: none; } .switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .switch .track { width: 46px; height: 26px; border-radius: var(--radius-pill); background: var(--gray-200); transition: background var(--transition); position: relative; } .switch .track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--transition); } .switch input:checked + .track { background: var(--gold); } .switch input:checked + .track::after { transform: translateX(20px); } .switch input:focus-visible + .track { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .pref-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: 15px 0; border-bottom: 1px solid var(--border); } .pref-row:first-of-type { padding-top: 0; } .pref-row:last-of-type { border-bottom: none; } .pref-row .pref-text h4 { font-family: var(--font-primary); font-size: .98rem; font-weight: 600; color: var(--teal-dark); margin-bottom: 2px; } .pref-row .pref-text p { font-size: .84rem; color: var(--fg2); } /* radio group (frequency) */ .radio-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--space-md); } .radio-pill { position: relative; } .radio-pill input { position: absolute; opacity: 0; } .radio-pill span { display: block; font-family: var(--font-secondary); font-weight: 600; font-size: .85rem; padding: 10px 18px; border-radius: var(--radius-pill); background: var(--cream); color: var(--fg2); border: 1px solid var(--border); cursor: pointer; transition: all var(--transition); } .radio-pill input:checked + span { background: var(--teal); color: #fff; border-color: var(--teal); } .radio-pill input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; } /* saved articles list */ .saved-list { display: grid; gap: var(--space-md); } .saved-item { display: flex; align-items: center; gap: var(--space-md); padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); transition: box-shadow var(--transition); } .saved-item:hover { box-shadow: var(--shadow-sm); } .saved-thumb { width: 64px; height: 64px; border-radius: var(--radius-md); flex: none; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; } .saved-item .saved-body { flex: 1; min-width: 0; } .saved-item .saved-body .tag { margin-bottom: 6px; } .saved-item .saved-body h4 { font-family: var(--font-primary); font-size: .96rem; font-weight: 600; color: var(--teal-dark); line-height: 1.3; } .saved-item .saved-body h4 a:hover { color: var(--teal); } .saved-remove { flex: none; display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--fg3); font-family: var(--font-secondary); font-weight: 600; font-size: .8rem; padding: 8px 10px; border-radius: var(--radius-md); transition: all var(--transition); } .saved-remove:hover { color: var(--orange-dark); background: rgba(242,106,61,.1); } .saved-remove svg { width: 15px; height: 15px; } /* danger zone */ .account-panel.danger { border-color: rgba(242,106,61,.4); background: rgba(242,106,61,.03); } .account-panel.danger > h2 { color: var(--orange-dark); } .account-panel.danger > h2 svg { color: var(--orange); } .btn-danger { background: transparent; color: var(--orange-dark); border-color: var(--orange); } .btn-danger:hover { background: var(--orange); color: #fff; box-shadow: var(--glow-orange); transform: translateY(-2px); } /* ════════════════════════════ REWARDS / POINTS ════════════════════════════ */ .points-card { background: var(--teal); border-radius: var(--radius-xl); padding: var(--space-xl); position: relative; overflow: hidden; color: #fff; margin-bottom: var(--space-lg); } .points-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 90% -10%, rgba(242,163,58,.3), transparent 60%); } .points-top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; } .points-label { font-family: var(--font-secondary); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-light); display: flex; align-items: center; gap: 7px; } .points-label svg { width: 15px; height: 15px; } .points-balance { font-family: var(--font-primary); font-weight: 800; font-size: clamp(2.2rem, 8vw, 3rem); line-height: 1; margin-top: 8px; } .points-balance .unit { font-size: 1rem; font-weight: 600; color: var(--fg-on-dark-2); margin-left: 6px; } .points-worth { position: relative; font-family: var(--font-secondary); font-size: .82rem; color: var(--fg-on-dark-2); margin-top: 6px; } .points-worth b { color: var(--gold-light); font-weight: 700; } .points-coin { flex: none; width: 56px; height: 56px; border-radius: 50%; background: rgba(242,163,58,.2); border: 1px solid rgba(242,163,58,.4); display: flex; align-items: center; justify-content: center; color: var(--gold-light); } .points-coin svg { width: 28px; height: 28px; } .points-progress { position: relative; margin-top: var(--space-lg); } .points-progress .ptrack { height: 10px; border-radius: var(--radius-pill); background: rgba(255,255,255,.16); overflow: hidden; } .points-progress .pfill { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--gold), var(--orange)); } .points-progress .pmeta { display: flex; justify-content: space-between; font-family: var(--font-secondary); font-size: .78rem; color: var(--fg-on-dark-2); margin-top: 9px; } .points-progress .pmeta b { color: #fff; font-weight: 700; } .points-actions { position: relative; display: flex; gap: 12px; flex-wrap: wrap; margin-top: var(--space-lg); } /* redeem tiers */ .redeem-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); } .redeem-tier { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: all var(--transition); } .redeem-tier:hover { box-shadow: var(--shadow-sm); border-color: var(--gold); } .redeem-tier.locked { opacity: .55; } .redeem-ico { flex: none; width: 48px; height: 48px; border-radius: 50%; background: rgba(242,163,58,.16); color: var(--gold-dark); display: flex; align-items: center; justify-content: center; } .redeem-ico svg { width: 22px; height: 22px; } .redeem-body { flex: 1; min-width: 0; } .redeem-body h4 { font-family: var(--font-primary); font-size: 1rem; font-weight: 700; color: var(--teal-dark); } .redeem-body p { font-family: var(--font-secondary); font-size: .78rem; color: var(--fg3); font-weight: 600; margin-top: 2px; } .redeem-tier .btn { flex: none; } /* points activity log */ .points-log { display: grid; gap: 2px; margin-top: var(--space-md); } .log-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: 12px 0; border-bottom: 1px solid var(--border); } .log-row:last-child { border-bottom: none; } .log-row .log-left { display: flex; align-items: center; gap: 12px; } .log-row .log-ico { flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(31,78,95,.08); color: var(--teal); } .log-row .log-ico svg { width: 16px; height: 16px; } .log-row .log-text b { font-family: var(--font-primary); font-size: .92rem; font-weight: 600; color: var(--teal-dark); display: block; } .log-row .log-text span { font-family: var(--font-secondary); font-size: .76rem; color: var(--fg3); } .log-row .log-pts { font-family: var(--font-primary); font-weight: 700; font-size: .95rem; flex: none; } .log-row .log-pts.plus { color: #1b7a4b; } .log-row .log-pts.minus { color: var(--orange-dark); } /* ════════════════════════════ ARTICLE (blog detail) ════════════════════════════ */ .article-hero { background: var(--teal); position: relative; overflow: hidden; padding: var(--space-2xl) 0 var(--space-xl); } .article-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 70% at 80% 120%, rgba(242,163,58,.2), transparent 62%); } .article-hero-in { position: relative; max-width: 760px; margin: 0 auto; } .article-hero .breadcrumb { color: var(--fg-on-dark-2); padding-top: 0; } .article-hero .breadcrumb a { color: var(--gold-light); } .article-hero .breadcrumb a:hover { color: #fff; } .article-hero .breadcrumb .current { color: var(--fg-on-dark-2); } .article-hero h1 { font-family: var(--font-primary); font-weight: 800; font-size: clamp(1.9rem, 5.5vw, 2.8rem); line-height: 1.12; letter-spacing: -.02em; color: #fff; margin: 14px 0; text-wrap: balance; } .article-hero .dek { font-size: 1.1rem; color: var(--fg-on-dark-2); line-height: 1.6; text-wrap: pretty; } .article-byline { display: flex; align-items: center; gap: 12px; margin-top: var(--space-lg); flex-wrap: wrap; } .article-byline .av { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--gold); flex: none; } .article-byline .who b { font-family: var(--font-primary); font-size: .92rem; color: #fff; display: block; } .article-byline .who span { font-family: var(--font-secondary); font-size: .78rem; color: var(--fg-on-dark-2); } .article-byline .meta-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.4); } .article-feature { max-width: 860px; margin: calc(var(--space-xl) * -1) auto 0; padding: 0 var(--gutter); position: relative; z-index: 2; } .article-feature .fimg { border-radius: var(--radius-xl); aspect-ratio: 16/9; box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; font-size: 5rem; } .article-layout { max-width: 860px; margin: 0 auto; padding: var(--space-2xl) var(--gutter); display: grid; grid-template-columns: 1fr; gap: var(--space-xl); } .article-body { max-width: 680px; } .article-body > * + * { margin-top: var(--space-lg); } .article-body p { font-size: 1.08rem; line-height: 1.8; color: var(--charcoal); } .article-body h2 { font-family: var(--font-primary); font-size: 1.6rem; font-weight: 700; color: var(--teal-dark); letter-spacing: -.02em; margin-top: var(--space-2xl); } .article-body h3 { font-family: var(--font-primary); font-size: 1.22rem; font-weight: 700; color: var(--teal-dark); margin-top: var(--space-xl); } .article-body a:not(.btn) { color: var(--teal); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; } .article-body a:not(.btn):hover { color: var(--gold-dark); } .article-body ul, .article-body ol { padding-left: 1.3em; } .article-body li { font-size: 1.06rem; line-height: 1.75; color: var(--charcoal); margin-bottom: 10px; } .article-body ul li::marker { color: var(--gold-dark); } .article-body ol li::marker { color: var(--teal); font-family: var(--font-primary); font-weight: 700; } .article-body img { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .article-body blockquote { border-left: 4px solid var(--gold); background: rgba(242,163,58,.08); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; padding: var(--space-md) var(--space-lg); font-family: var(--font-primary); font-size: 1.2rem; font-weight: 500; color: var(--teal-dark); line-height: 1.5; font-style: italic; } .article-body figure { margin-top: var(--space-lg); } .article-body figure .fig-ph { border-radius: var(--radius-lg); aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; box-shadow: var(--shadow-sm); } .article-body figcaption { font-family: var(--font-secondary); font-size: .8rem; color: var(--fg3); text-align: center; margin-top: 10px; } /* callout / tip box */ .callout { display: flex; gap: var(--space-md); align-items: flex-start; background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--teal); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-sm); } .callout.gold { border-left-color: var(--gold); } .callout .c-ico { flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(31,78,95,.1); color: var(--teal); display: flex; align-items: center; justify-content: center; } .callout.gold .c-ico { background: rgba(242,163,58,.16); color: var(--gold-dark); } .callout .c-ico svg { width: 20px; height: 20px; } .callout h4 { font-family: var(--font-primary); font-size: 1rem; font-weight: 700; color: var(--teal-dark); margin-bottom: 4px; } .callout p { font-size: .96rem !important; line-height: 1.65 !important; color: var(--fg2) !important; margin: 0 !important; } /* table of contents */ .toc { background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); } .toc h4 { font-family: var(--font-secondary); font-weight: 700; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 12px; } .toc ol { list-style: none; padding: 0; counter-reset: toc; display: grid; gap: 9px; } .toc li { counter-increment: toc; } .toc a { display: flex; gap: 10px; font-family: var(--font-body); font-size: .94rem; color: var(--fg2); } .toc a::before { content: counter(toc); font-family: var(--font-primary); font-weight: 700; color: var(--teal); flex: none; } .toc a:hover { color: var(--teal); } /* tags + share row */ .article-foot { max-width: 680px; margin: 0 auto; padding: 0 var(--gutter) var(--space-2xl); display: grid; gap: var(--space-lg); } .article-tags { display: flex; gap: 9px; flex-wrap: wrap; } .article-tags a { font-family: var(--font-secondary); font-weight: 600; font-size: .8rem; padding: 7px 15px; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--border); color: var(--fg2); transition: all var(--transition); } .article-tags a:hover { border-color: var(--teal); color: var(--teal); } .share-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: var(--space-lg); border-top: 1px solid var(--border); } .share-row .lbl { font-family: var(--font-secondary); font-weight: 700; font-size: .8rem; letter-spacing: .04em; color: var(--teal-dark); } .share-row .links { display: flex; gap: 8px; } .share-row .links a { width: 38px; height: 38px; border-radius: 50%; background: rgba(31,78,95,.08); color: var(--teal); display: flex; align-items: center; justify-content: center; transition: all var(--transition); } .share-row .links a:hover { background: var(--teal); color: #fff; transform: translateY(-2px); } .share-row .links svg { width: 17px; height: 17px; } /* author bio */ .author-bio { max-width: 680px; margin: 0 auto; padding: 0 var(--gutter); } .author-bio .inner { display: flex; gap: var(--space-lg); align-items: flex-start; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-lg); box-shadow: var(--shadow-sm); } .author-bio .av { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--gold); flex: none; } .author-bio h4 { font-family: var(--font-primary); font-size: 1.1rem; font-weight: 700; color: var(--teal-dark); } .author-bio .role { font-family: var(--font-secondary); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-dark); margin: 2px 0 8px; } .author-bio p { font-size: .92rem; color: var(--fg2); line-height: 1.6; } /* ════════════════════════════ AUTH (login / signup) ════════════════════════════ */ .auth { min-height: calc(100vh - 70px); display: grid; grid-template-columns: 1fr; } .auth-aside { display: none; position: relative; overflow: hidden; background: var(--teal); color: #fff; padding: var(--space-2xl) var(--space-xl); } .auth-aside::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 30% 120%, rgba(242,163,58,.26), transparent 62%); } .auth-aside-in { position: relative; max-width: 420px; margin: auto; display: flex; flex-direction: column; height: 100%; justify-content: center; } .auth-aside .mascot { width: 96px; height: 96px; border-radius: 50%; border: 4px solid rgba(242,163,58,.5); box-shadow: 0 0 0 12px rgba(242,163,58,.12); margin-bottom: var(--space-lg); } .auth-aside h2 { font-family: var(--font-primary); font-weight: 800; font-size: 2rem; line-height: 1.12; letter-spacing: -.02em; color: #fff; margin-bottom: var(--space-md); text-wrap: balance; } .auth-aside h2 span { color: var(--gold); } .auth-aside p { color: var(--fg-on-dark-2); font-size: 1.02rem; margin-bottom: var(--space-xl); } .auth-perks { display: grid; gap: var(--space-md); } .auth-perks li { display: flex; gap: 12px; align-items: flex-start; font-size: .96rem; color: rgba(247,244,239,.9); } .auth-perks .pk { flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(242,163,58,.2); color: var(--gold-light); display: flex; align-items: center; justify-content: center; } .auth-perks .pk svg { width: 16px; height: 16px; } .auth-main { display: flex; align-items: center; justify-content: center; padding: var(--space-2xl) var(--gutter); } .auth-form { width: 100%; max-width: 420px; } .auth-form .auth-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--space-xl); } .auth-form .auth-brand img { width: 40px; height: 40px; border-radius: 50%; box-shadow: var(--shadow-sm); } .auth-form .auth-brand .name { font-family: var(--font-primary); font-weight: 800; font-size: 1.05rem; color: var(--teal-dark); letter-spacing: -.02em; } .auth-form .auth-brand .name span { color: var(--gold); } .auth-form h1 { font-family: var(--font-primary); font-weight: 800; font-size: clamp(1.6rem, 5vw, 2rem); color: var(--teal-dark); letter-spacing: -.02em; line-height: 1.15; margin-bottom: 8px; } .auth-form .sub { color: var(--fg2); margin-bottom: var(--space-xl); } .auth-form .sub a { color: var(--teal); font-weight: 600; } .auth-form .sub a:hover { color: var(--gold-dark); } .auth-social { display: grid; gap: 10px; margin-bottom: var(--space-lg); } .btn-social { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 18px; border-radius: var(--radius-md); border: 1px solid var(--border); background: #fff; font-family: var(--font-primary); font-weight: 600; font-size: .92rem; color: var(--teal-dark); transition: all var(--transition); } .btn-social:hover { border-color: var(--teal); background: var(--cream); transform: translateY(-1px); } .btn-social svg { width: 19px; height: 19px; flex: none; } .auth-divider { display: flex; align-items: center; gap: 14px; margin: var(--space-lg) 0; color: var(--fg3); font-family: var(--font-secondary); font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .auth-divider::before, .auth-divider::after { content: ''; height: 1px; background: var(--border); flex: 1; } .label-row { display: flex; align-items: center; justify-content: space-between; } .label-row a { font-family: var(--font-secondary); font-size: .76rem; font-weight: 600; color: var(--teal); } .label-row a:hover { color: var(--gold-dark); } .check-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: var(--space-lg); } .check-row input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--teal); flex: none; } .check-row label { font-size: .86rem; color: var(--fg2); line-height: 1.5; } .check-row label a { color: var(--teal); font-weight: 600; } .check-row label a:hover { color: var(--gold-dark); } .auth-foot { text-align: center; margin-top: var(--space-xl); font-size: .9rem; color: var(--fg2); } .auth-foot a { color: var(--teal); font-weight: 700; } .auth-foot a:hover { color: var(--gold-dark); } .pw-hint { font-size: .76rem; color: var(--fg3); margin-top: 6px; } @media (min-width: 880px) { .auth.split-aside { grid-template-columns: 1.05fr 1fr; } .auth.split-aside .auth-aside { display: block; } } /* ════════════════════════════ 404 / ERROR ════════════════════════════ */ .error-hero { background: var(--teal); position: relative; overflow: hidden; } .error-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 70% at 50% 120%, rgba(242,163,58,.22), transparent 62%); } .error-in { position: relative; max-width: 640px; margin: 0 auto; text-align: center; padding: var(--space-3xl) 0; } .error-mascot { width: 120px; height: 120px; border-radius: 50%; border: 4px solid rgba(242,163,58,.5); box-shadow: 0 0 0 14px rgba(242,163,58,.12); margin: 0 auto var(--space-lg); } .error-in .error-code { font-family: var(--font-primary); font-weight: 800; font-size: clamp(4.5rem, 18vw, 8rem); line-height: .9; letter-spacing: -.04em; color: #fff; } .error-in .error-code span { color: var(--gold); } .error-hero h1 { font-family: var(--font-primary); font-weight: 700; font-size: clamp(1.4rem, 5vw, 1.9rem); color: #fff; margin: var(--space-md) 0 12px; letter-spacing: -.02em; text-wrap: balance; } .error-hero p { color: var(--fg-on-dark-2); font-size: 1.05rem; max-width: 46ch; margin: 0 auto var(--space-xl); text-wrap: pretty; } .error-cta { display: flex; gap: var(--space-md); flex-wrap: wrap; justify-content: center; } .error-links { display: grid; grid-template-columns: 1fr; gap: var(--space-md); max-width: 760px; margin: 0 auto; } .error-link { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-lg); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); } .error-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .error-link .el-ico { flex: none; width: 46px; height: 46px; border-radius: 50%; background: rgba(31,78,95,.1); color: var(--teal); display: flex; align-items: center; justify-content: center; } .error-link.gold .el-ico { background: rgba(242,163,58,.16); color: var(--gold-dark); } .error-link.orange .el-ico { background: rgba(242,106,61,.12); color: var(--orange-dark); } .error-link .el-ico svg { width: 22px; height: 22px; } .error-link h3 { font-family: var(--font-primary); font-size: 1rem; font-weight: 700; color: var(--teal-dark); } .error-link p { font-size: .86rem; color: var(--fg2); margin-top: 2px; } .error-link .el-arrow { margin-left: auto; color: var(--fg3); flex: none; } .error-link:hover .el-arrow { color: var(--teal); } .error-link .el-arrow svg { width: 18px; height: 18px; } /* ════════════════════════════ LEGAL / DOC PAGE ════════════════════════════ */ .legal-hero { background: var(--teal); position: relative; overflow: hidden; padding: var(--space-2xl) 0; } .legal-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 70% at 20% 120%, rgba(242,163,58,.16), transparent 62%); } .legal-hero-in { position: relative; max-width: 820px; margin: 0 auto; } .legal-hero h1 { font-family: var(--font-primary); font-weight: 800; font-size: clamp(1.9rem, 6vw, 2.7rem); color: #fff; letter-spacing: -.02em; line-height: 1.12; margin: 12px 0; text-wrap: balance; } .legal-hero .updated { font-family: var(--font-secondary); font-size: .82rem; font-weight: 600; color: var(--fg-on-dark-2); } .legal-hero .updated b { color: var(--gold-light); } .legal-layout { max-width: 820px; margin: 0 auto; padding: var(--space-2xl) var(--gutter); display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: start; } .legal-toc { background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); } .legal-toc h2 { font-family: var(--font-secondary); font-weight: 700; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 12px; } .legal-toc ol { list-style: none; padding: 0; counter-reset: lt; display: grid; gap: 8px; } .legal-toc li { counter-increment: lt; } .legal-toc a { display: flex; gap: 10px; font-size: .92rem; color: var(--fg2); } .legal-toc a::before { content: counter(lt) "."; font-family: var(--font-primary); font-weight: 700; color: var(--teal); flex: none; } .legal-toc a:hover { color: var(--teal); } .legal-body { max-width: 720px; } .legal-body .intro { font-size: 1.05rem; color: var(--fg2); line-height: 1.75; margin-bottom: var(--space-xl); } .legal-section { margin-bottom: var(--space-xl); scroll-margin-top: 90px; } .legal-section h2 { font-family: var(--font-primary); font-size: 1.3rem; font-weight: 700; color: var(--teal-dark); letter-spacing: -.01em; margin-bottom: 12px; display: flex; gap: 12px; align-items: baseline; } .legal-section h2 .nm { font-size: .9rem; color: var(--gold-dark); font-weight: 800; flex: none; } .legal-section h3 { font-family: var(--font-primary); font-size: 1.05rem; font-weight: 600; color: var(--teal-dark); margin: var(--space-lg) 0 8px; } .legal-section p { color: var(--charcoal); line-height: 1.8; margin-bottom: var(--space-md); } .legal-section ul { padding-left: 1.3em; margin-bottom: var(--space-md); } .legal-section li { line-height: 1.75; color: var(--charcoal); margin-bottom: 8px; } .legal-section li::marker { color: var(--gold-dark); } .legal-section a:not(.btn) { color: var(--teal); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; } .legal-section a:not(.btn):hover { color: var(--gold-dark); } .legal-contact { background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--teal); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-sm); } .legal-contact h3 { margin-top: 0 !important; } .legal-contact p { margin-bottom: 0; font-size: .95rem; color: var(--fg2); } @media (min-width: 880px) { .legal-layout.with-toc { grid-template-columns: 240px 1fr; gap: var(--space-2xl); } .legal-layout.with-toc .legal-toc { position: sticky; top: 88px; } } /* ════════════════════════════ PAYOUT METHOD ════════════════════════════ */ .payout-summary { display: flex; align-items: center; gap: var(--space-md); background: var(--teal); border-radius: var(--radius-lg); padding: var(--space-lg); color: #fff; position: relative; overflow: hidden; margin-bottom: var(--space-lg); } .payout-summary::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 95% -20%, rgba(242,163,58,.28), transparent 60%); } .payout-summary .ps-ico { position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; background: rgba(242,163,58,.2); color: var(--gold-light); display: flex; align-items: center; justify-content: center; } .payout-summary .ps-ico svg { width: 24px; height: 24px; } .payout-summary .ps-text { position: relative; } .payout-summary .ps-text span { font-family: var(--font-secondary); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-light); } .payout-summary .ps-text b { display: block; font-family: var(--font-primary); font-weight: 700; font-size: 1.05rem; margin-top: 3px; } .method-options { display: grid; gap: var(--space-md); margin: var(--space-md) 0 var(--space-lg); } .method-opt { position: relative; } .method-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .method-opt .mo-card { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-lg); border: 2px solid var(--border); border-radius: var(--radius-lg); background: #fff; transition: all var(--transition); } .method-opt:hover .mo-card { border-color: var(--gold); } .method-opt input:checked + .mo-card { border-color: var(--teal); background: rgba(31,78,95,.04); box-shadow: var(--shadow-sm); } .method-opt input:focus-visible + .mo-card { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .mo-card .mo-ico { flex: none; width: 46px; height: 46px; border-radius: var(--radius-md); background: rgba(31,78,95,.08); color: var(--teal); display: flex; align-items: center; justify-content: center; } .mo-card .mo-ico svg { width: 23px; height: 23px; } .mo-card .mo-body { flex: 1; min-width: 0; } .mo-card .mo-body h4 { font-family: var(--font-primary); font-size: 1rem; font-weight: 700; color: var(--teal-dark); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .mo-card .mo-body p { font-size: .84rem; color: var(--fg2); margin-top: 3px; } .mo-badge { font-family: var(--font-secondary); font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--radius-pill); background: rgba(242,163,58,.18); color: var(--gold-dark); } .mo-check { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; color: #fff; transition: all var(--transition); } .method-opt input:checked + .mo-card .mo-check { background: var(--teal); border-color: var(--teal); } .mo-check svg { width: 14px; height: 14px; opacity: 0; transition: opacity var(--transition); } .method-opt input:checked + .mo-card .mo-check svg { opacity: 1; } /* conditional detail panels */ .method-detail { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); background: var(--cream); margin-bottom: var(--space-lg); } .method-detail > legend, .method-detail .md-title { font-family: var(--font-primary); font-weight: 700; font-size: 1rem; color: var(--teal-dark); margin-bottom: var(--space-md); padding: 0; } .payout-note { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; color: var(--fg2); background: rgba(31,78,95,.05); border-radius: var(--radius-md); padding: 12px 14px; margin-top: var(--space-md); } .payout-note svg { width: 17px; height: 17px; flex: none; color: var(--teal); margin-top: 1px; } /* ════════════════════════════ RESPONSIVE (mobile-first → up) ════════════════════════════ */ @media (min-width: 600px) { .news-form { flex-direction: row; } .news-form .btn { width: auto; } .grid { grid-template-columns: repeat(2, 1fr); } .pillars { grid-template-columns: repeat(3, 1fr); } .tgrid { grid-template-columns: repeat(2, 1fr); } .values { grid-template-columns: repeat(2, 1fr); } .redeem-grid { grid-template-columns: repeat(2, 1fr); } .error-links { grid-template-columns: repeat(3, 1fr); } .stats-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 880px) { :root { --gutter: 40px; } .nav { display: flex; } .hdr-cta { margin-left: var(--space-md); } .hdr-actions { margin-left: var(--space-md); } .account-shell { grid-template-columns: 248px 1fr; } .account-side { position: sticky; top: 88px; } .section { padding: var(--space-3xl) 0; } .hero-in { grid-template-columns: 1.15fr .85fr; } .hero-copy { text-align: left; } .hero p { margin-left: 0; margin-right: 0; } .hero-cta, .hero-stats { justify-content: flex-start; } .grid { grid-template-columns: repeat(3, 1fr); } .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .tgrid { grid-template-columns: repeat(3, 1fr); } .ftr-grid { grid-template-columns: 2.2fr 1fr 1fr 1.2fr; } .story { grid-template-columns: 1fr 1fr; } .story.reverse .story-art { order: 2; } .news-form { max-width: none; } .pd-layout { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); } .pd-actions { flex-direction: row; } .pd-actions .btn { flex: 1; } } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } } /* ════════════════════════════════════════════════════════════════════ WORDPRESS SUPPLEMENTAL STYLES Added on top of the original DogCareTrainingFun stylesheet so that WordPress-generated markup (menus, post content, pagination, comments, widgets) matches the theme. Edit freely. ════════════════════════════════════════════════════════════════════ */ /* ── Nav menu (wp_nav_menu outputs a