/* 1dollarlove - Professional Minimalist Stylesheet Editorial + Google Minimal with AJAX support */ :root { --site-accent: #85BB65; --bg: #ffffff; --card-bg: #ffffff; --border: #e8eaed; --text: #202124; --accent: var(--site-accent); --helper-text: #70757a; --field-focus-ring: rgba(133, 187, 101, 0.28); } /* Sitewide palette swaps (spotlight hour drives body class on home / poll sync). Same tokens on .phrase-live-preview-shell.theme-* for form live preview (card only). */ body.theme-classic, .phrase-live-preview-shell.theme-classic { --bg: #ffffff; --text: #1a1a1a; --accent: var(--site-accent); --helper-text: #70757a; --card-bg: #ffffff; --border: #e8eaed; } body.theme-night, .phrase-live-preview-shell.theme-night { /* Anthracite surfaces — softer than near-black #121212 / #1e1e1e */ --bg: #2a2b30; --text: #dde0e5; --accent: var(--site-accent); --helper-text: #9aa1ac; --card-bg: #323338; --border: #43444d; } body.theme-sepia, .phrase-live-preview-shell.theme-sepia { --bg: #f4ecd8; --text: #433422; --accent: var(--site-accent); --helper-text: #6d5d48; --card-bg: #fdfaf3; --border: #e0d7c1; } body.theme-sage, .phrase-live-preview-shell.theme-sage { --bg: #e8f5e9; --text: #202124; --accent: var(--site-accent); --helper-text: #588157; --card-bg: #f4faf4; --border: #c8e6c9; } /* In-form live preview: framed spotlight mockup; .theme-* on shell sets vars only inside the card. */ .phrase-live-preview-shell { display: flex; align-items: center; justify-content: center; min-height: 220px; border-radius: 16px; border: 1px solid var(--border); background: var(--card-bg); overflow: hidden; padding: 18px; margin-top: 4px; box-shadow: inset 0 0 0 1px rgba(60, 64, 67, 0.06); transition: background-color 1.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 1.2s cubic-bezier(0.4, 0, 0.2, 1); } body.theme-night .phrase-live-preview-shell, .phrase-live-preview-shell.theme-night { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); } .phrase-live-preview-shell .phrase-hero.main-phrase { margin: 0; width: 100%; min-height: 184px; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .phrase-live-preview-shell .phrase-text-large { font-size: clamp(1.35rem, 4.5vw, 2.75rem); color: var(--text); transition: color 1.2s cubic-bezier(0.4, 0, 0.2, 1); margin: 0 0 10px 0; line-height: 1.25; } .phrase-live-preview-shell .phrase-text-large.empty { color: var(--helper-text); font-family: 'Segoe UI', sans-serif; font-style: normal; } .phrase-live-preview-shell .author-sub { font-size: 1.05rem; transition: color 1.2s cubic-bezier(0.4, 0, 0.2, 1); margin: 0; } html { margin: 0; padding: 0; min-height: 100vh; background-color: var(--bg); transition: background-color 1.2s cubic-bezier(0.4, 0, 0.2, 1); } body { margin: 0; padding: 0; min-height: 100vh; font-family: 'Segoe UI', Roboto, -apple-system, sans-serif; background-color: var(--bg); color: var(--text); overflow-x: hidden; transition: background-color 1.2s cubic-bezier(0.4, 0, 0.2, 1), color 1.2s cubic-bezier(0.4, 0, 0.2, 1); } .google-layout { display: flex; flex-direction: column; min-height: 100vh; } /* Home spotlight: opacity fade (load + AJAX). JS adds .js-spotlight-transitions on . */ #dynamic-phrase-container { transition: opacity 0.65s ease-in-out; } html.js-spotlight-transitions #dynamic-phrase-container:not(.is-spotlight-visible) { opacity: 0; } html.js-spotlight-transitions #dynamic-phrase-container.is-spotlight-visible { opacity: 1; } html.js-spotlight-transitions #dynamic-phrase-container.is-spotlight-swapping { pointer-events: none; } /* Entrance Animation (cards/forms; home spotlight uses opacity above) */ @keyframes fadeInUpScale { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .card, .form-container { animation: fadeInUpScale 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .phrase-hero:not(#dynamic-phrase-container) { animation: fadeInUpScale 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; } /* Header & Logo (Scaled to 75%) */ .top-center { padding-top: 28px; text-align: center; } .scaled-logo { transform: scale(0.75); transform-origin: top center; text-decoration: none; display: flex; flex-direction: column; align-items: center; } .brand { color: var(--text); font-size: 2.5rem; font-weight: 300; transition: color 1.2s cubic-bezier(0.4, 0, 0.2, 1); } .brand-name { font-size: 75%; } .brand img { width: 36px; margin-bottom: 6px; image-rendering: pixelated; } /* Main Content Layout */ .center-content { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px 20px; } .center-content-home { justify-content: center; padding-top: 26px; padding-bottom: 12px; } .center-content-home .phrase-hero.main-phrase { margin-top: 0; margin-bottom: 0; } .home-late-cta { animation: none; opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none; margin: 10px auto 18px; width: min(480px, calc(100vw - 24px)); max-width: calc(100vw - 24px); box-sizing: border-box; transition: opacity 0.7s ease, transform 0.7s ease; } .home-late-cta.is-visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* Editorial Phrase Styles */ .phrase-hero { text-align: center; max-width: 850px; margin-bottom: 60px; } /* Spotlight copy transitions smoothly when body.theme-* changes */ .main-phrase .phrase-text-large, .main-phrase .author-sub, .main-phrase .phrase-engagement, .main-phrase .phrase-stat-label, .main-phrase .phrase-share-trigger .phrase-stat-label, .main-phrase #view-count { transition: color 1.2s cubic-bezier(0.4, 0, 0.2, 1); } .phrase-text-large { font-family: 'Playfair Display', serif; font-style: italic; font-size: 3.8rem; font-weight: 400; color: var(--text); line-height: 1.2; margin: 0 0 25px 0; letter-spacing: -0.5px; } .main-phrase .phrase-text-large { color: var(--text); } .phrase-text-large.empty { color: #bdc1c6; font-size: 2.2rem; font-style: normal; font-family: 'Segoe UI', sans-serif; } .author-sub { font-size: 1.3rem; color: var(--helper-text); font-style: italic; font-weight: 300; } .phrase-engagement { margin-top: 1.25rem; font-size: 0.95rem; color: var(--helper-text); } .phrase-engagement-tri { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2rem; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; } /* SHARE + VIEWS share one baseline so the label isn’t shifted by the view count height */ .phrase-eng-pair { display: inline-flex; align-items: baseline; gap: 2rem; min-width: 0; } .phrase-eng-col { display: flex; align-items: center; min-width: 0; } .phrase-eng-col-right { justify-content: flex-end; } .phrase-stat { display: inline-flex; align-items: baseline; gap: 0.35rem; } .phrase-stat-label { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.65rem; font-weight: 600; } .phrase-stat-loves { gap: 0.5rem; align-items: center; } /* Same typography as .phrase-stat-label (views); no extra size/color from button */ .phrase-share-trigger { background: none; border: none; padding: 0; margin: 0; cursor: pointer; color: inherit; font: inherit; line-height: 1; vertical-align: baseline; display: inline-flex; align-items: baseline; } .phrase-share-trigger:hover .phrase-stat-label, .phrase-share-trigger:focus-visible .phrase-stat-label { color: var(--accent); } .phrase-share-trigger:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* Love button & logo icon */ .btn-love { background: transparent; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; margin: -10px; transition: opacity 0.3s ease; outline: none; } .btn-love:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 10px; } .btn-love.active { cursor: pointer; } .love-heart-icon { width: 22px; height: auto; display: block; background: transparent; border-radius: 0; object-fit: contain; filter: grayscale(100%) opacity(0.3); transition: filter 0.5s ease, transform 0.5s ease; } @media (hover: hover) and (pointer: fine) { .btn-love:hover:not(.active) .love-heart-icon { filter: grayscale(0%) opacity(1); transform: scale(1.2) rotate(-5deg); } } .btn-love.active .love-heart-icon { filter: none; transform: scale(1.1); } @keyframes heartPulse { 0% { transform: scale(1.1); } 50% { transform: scale(1.45); } 100% { transform: scale(1.1); } } .btn-love.just-clicked .love-heart-icon { animation: heartPulse 0.4s forwards; } .love-count { font-family: 'Roboto', sans-serif; font-weight: 700; color: var(--text); font-size: 0.9rem; transition: color 1.2s cubic-bezier(0.4, 0, 0.2, 1); } .phrase-author-stats { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; font-size: 0.9rem; color: var(--helper-text); margin-bottom: 1rem; } .phrase-author-stats strong { color: var(--accent); font-weight: 700; } .theme-selector { display: flex; flex-direction: column; gap: 10px; } @media (min-width: 520px) { .theme-selector { flex-direction: row; flex-wrap: wrap; gap: 12px; } } .theme-selector .theme-option { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--card-bg); cursor: pointer; font-size: 0.9rem; color: var(--text); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .theme-selector .theme-option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .theme-selector .theme-option:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-selector .theme-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; margin: 0; } .theme-selector .theme-option .dot { display: inline-block; flex-shrink: 0; min-width: 14px; min-height: 14px; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); } .theme-selector .theme-option .dot.classic { background-color: #f5f5f5 !important; border-color: #dadce0; } .theme-selector .theme-option .dot.night { background-color: #2a2b30 !important; border-color: #52525c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } .theme-selector .theme-option .dot.sepia { background-color: #f4ecd8 !important; border-color: #d4c4a8; } .theme-selector .theme-option .dot.sage { background-color: #e8f5e9 !important; border-color: #a5d6a7; } /* Four theme chips in one row (new.php / edit.php), below live preview */ .theme-selector.theme-selector-inline { flex-direction: row; flex-wrap: nowrap; gap: clamp(6px, 1.5vw, 10px); justify-content: stretch; } .theme-selector.theme-selector-inline .theme-option { flex: 0 1 auto; min-width: fit-content; justify-content: flex-start; display: inline-flex; flex-direction: row; align-items: center; white-space: nowrap; padding: 9px clamp(4px, 1.2vw, 10px); font-size: clamp(0.65rem, 2.1vw, 0.82rem); gap: 6px; } .theme-selector.theme-selector-inline .theme-option .dot { width: 12px; height: 12px; } .cookie-notice { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--bg); border: 1px solid var(--border); padding: 14px 18px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); z-index: 1000; font-size: 0.84rem; color: var(--helper-text); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; width: min(480px, calc(100vw - 30px)); max-width: calc(100vw - 30px); box-sizing: border-box; text-align: center; } .cookie-notice p { margin: 0; max-width: 100%; line-height: 1.5; text-align: center; } .cookie-notice a { color: var(--accent); } .cookie-notice .btn-sm { margin-top: 15px; } .btn-sm { background: var(--text); color: var(--bg); border: none; padding: 7px 16px; border-radius: 10px; cursor: pointer; font-size: 0.75rem; font-weight: 600; transition: opacity 0.2s ease, transform 0.2s ease; } .btn-sm:hover { opacity: 0.92; transform: scale(1.02); } @media (max-width: 600px) { .cookie-notice { bottom: 14px; width: calc(100vw - 24px); max-width: calc(100vw - 24px); padding: 12px 14px; gap: 15px; } } /* Unified Button System */ .btn-primary { background-color: var(--accent); border: 1px solid var(--accent); border-radius: 8px; color: #ffffff; font-size: 16px; font-weight: 600; padding: 14px 35px; display: inline-block; text-align: center; cursor: pointer; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .btn-primary:hover { filter: brightness(1.12); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .btn { background-color: #f8f9fa; border: 1px solid #f8f9fa; border-radius: 8px; color: #3c4043; font-size: 16px; padding: 14px 35px; text-decoration: none; transition: all 0.3s ease; display: inline-block; } .btn:hover { border: 1px solid #dadce0; background-color: #ffffff; } /* Management Links Section */ .mgmt-container { margin-top: 40px; margin-bottom: 30px; text-align: center; } .mgmt-text { font-size: 0.9rem; color: #70757a; } .mgmt-text a { color: #70757a; text-decoration: none; transition: color 0.3s ease; } .mgmt-text a:hover { color: var(--accent); text-decoration: underline; } /* Minimal Google-Style Footer Bar */ .minimal-footer { background: var(--card-bg); border-top: 1px solid var(--border); padding: 20px 30px; font-size: 14px; color: var(--helper-text); } .f-row { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; width: 100%; } .f-links { display: flex; align-items: center; gap: 30px; } .footer-link { color: #70757a; white-space: nowrap; } .f-links a.footer-link { text-decoration: none; } .f-links a.footer-link:hover { text-decoration: underline; } .footer-link-current { text-decoration: underline; cursor: default; } /* Cards & Form Containers */ .card { background: var(--card-bg); padding: 45px; border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04); box-sizing: border-box; } .form-container { max-width: 480px; width: 100%; } .form-container.form-container-wide { max-width: 620px; } .cta-card { text-align: center; } .cta-inspiration { font-size: 1.05rem; color: #5f6368; margin-bottom: 12px; line-height: 1.6; } .cta-moment { font-size: 0.85rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 25px; } /* Elegant Form Fields */ .elegant-form { display: flex; flex-direction: column; gap: 20px; } .elegant-form .field-group { display: flex; flex-direction: column; gap: 8px; } .antispam-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .elegant-form .field-label { font-size: 0.85rem; color: #5f6368; margin: 0; font-weight: 500; letter-spacing: 0.01em; } .booking-form .field-helper { display: flex; align-items: flex-start; gap: 6px; } .booking-form .field-helper::before { content: 'i'; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-top: 1px; border-radius: 50%; background: #eceff1; color: #8a939b; border: 1px solid #dde3e8; font-size: 10px; font-weight: 700; line-height: 1; flex: 0 0 15px; } .reminder-opt-in-group { margin-top: 18px; align-items: flex-start; text-align: left; } .checkbox-option { display: flex; align-items: flex-start; justify-content: flex-start; gap: 6px; width: 100%; font-size: 0.9rem; line-height: 1.4; text-align: left; } .checkbox-option input[type="checkbox"] { flex: 0 0 auto; width: auto; margin: 3px 0 0; padding: 0; accent-color: var(--site-accent); } .checkbox-option:has(input:disabled) { opacity: 0.62; } /* Shared text-like controls (new, contact, edit, booking fields). */ .field-control, .elegant-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), .elegant-form textarea, .elegant-form select { padding: 14px; border: 1px solid var(--border); border-radius: 8px; width: 100%; box-sizing: border-box; font-size: 1rem; background: #fafafa; color: var(--text); font-family: 'Roboto', sans-serif; transition: border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease; } .field-control:focus, .field-control:focus-visible, .elegant-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus, .elegant-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus-visible, .elegant-form textarea:focus, .elegant-form textarea:focus-visible, .elegant-form select:focus, .elegant-form select:focus-visible { outline: none; border-color: var(--site-accent); background-color: var(--card-bg); box-shadow: 0 0 0 3px var(--field-focus-ring); } .field-control:disabled, .elegant-form input:disabled, .elegant-form textarea:disabled, .elegant-form select:disabled { opacity: 0.62; cursor: not-allowed; box-shadow: none; } .elegant-form .phrase-field-wrap { display: flex; flex-direction: column; gap: 10px; } /* Phrase textarea + soft counter (bottom-right inside field) */ .elegant-form .phrase-input-shell { position: relative; width: 100%; } .elegant-form .phrase-input-shell textarea { padding-bottom: 2.15rem; padding-right: 15px; resize: vertical; min-height: 5.75rem; } .elegant-form .phrase-input-shell .phrase-counter-row { position: absolute; right: 13px; bottom: 11px; display: flex; justify-content: flex-end; align-items: baseline; margin: 0; font-size: 0.65rem; font-weight: 400; letter-spacing: 0.05em; color: #d0d3d8; user-select: none; pointer-events: none; } .elegant-form .phrase-input-shell .phrase-counter-val { font-variant-numeric: tabular-nums; color: #b8bcc4; min-width: 1.35em; text-align: right; letter-spacing: 0.02em; } .elegant-form .phrase-input-shell .phrase-counter-delim { color: #e3e5e8; font-weight: 300; } .elegant-form .phrase-input-shell .phrase-counter-max { color: #ccd0d6; letter-spacing: 0.02em; } .phrase-field-wrap.phrase-counter-near .phrase-input-shell .phrase-counter-val { color: #b8952e; } .phrase-field-wrap.phrase-counter-near .phrase-input-shell .phrase-counter-row { color: #d4c49a; } .phrase-field-wrap.phrase-counter-full .phrase-input-shell .phrase-counter-val { color: var(--accent); font-weight: 600; } .phrase-field-wrap.phrase-counter-full .phrase-input-shell .phrase-counter-row { color: #a5d6a7; } .row { display: flex; gap: 15px; } .row-author-contact .field-group { flex: 1 1 0; min-width: 0; } .booking-timezone-select { width: 100%; max-width: 100%; box-sizing: border-box; min-height: 44px; } /* Date + hour + duration (new.php): grid avoids Safari date input overlap on tablet */ .row-booking-slot { display: grid; gap: 15px; align-items: end; width: 100%; max-width: 100%; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr); } .row-booking-slot .field-booking-col { min-width: 0; } /* Shared sizing for date / hour / duration (Safari date input needs explicit box) */ .booking-form .booking-date-shell { display: block; width: 100%; max-width: 100%; } .booking-form .booking-control { display: block; width: 100%; max-width: 100%; min-width: 0; margin: 0; line-height: 1.25; height: 48px; } .booking-form input.booking-control[type="date"] { -webkit-appearance: none; appearance: none; } .booking-form input.booking-control[type="date"]::-webkit-date-and-time-value { line-height: 1.25; margin: 0; padding: 0; } .booking-form input.booking-control[type="date"]::-webkit-calendar-picker-indicator { margin: 0 0 0 4px; opacity: 0.65; } .booking-form select.booking-control { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2370757a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 10px center; background-size: 1em; padding-right: 2.25rem; cursor: pointer; } /* Compact controls only when date, hour and duration share one row (wide desktop) */ @media (min-width: 1025px) { .row-booking-slot .booking-control { font-size: 0.84rem; height: 38px; padding: 0.32rem 0.45rem; } .row-booking-slot select.booking-control { padding-right: 1.65rem; } } /* Tablet / narrow desktop: date full width, hour + duration on second row */ @media (max-width: 1024px) { .row-booking-slot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .row-booking-slot .field-booking-col:first-child { grid-column: 1 / -1; } } .booking-total-line { color: var(--helper-text); } .phrase-live-preview-after-phrase { margin-top: 6px; margin-bottom: 4px; } .booking-form-footer-total { margin-top: 22px; margin-bottom: 14px; font-size: 0.95rem; } .booking-form-footer-submit { margin-bottom: 4px; } .error { color: #d93025; background: #fce8e6; padding: 12px; border-radius: 8px; margin-bottom: 20px; text-align: center; } .success-msg { color: var(--accent); background: #e6f4ea; padding: 12px; border-radius: 8px; margin-bottom: 20px; text-align: center; } .contact-form select.contact-reason-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2370757a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 10px center; background-size: 1em; cursor: pointer; padding-right: 2.25rem; } @media (max-width: 768px) { .phrase-text-large { font-size: 2.5rem; } .f-row { flex-direction: column; gap: 10px; } .f-links { flex-wrap: wrap; justify-content: center; gap: 8px 20px; } .row { flex-direction: column; } .row-booking-slot { grid-template-columns: 1fr; align-items: stretch; } .row-booking-slot .field-booking-col:first-child { grid-column: auto; } .theme-selector.theme-selector-inline { flex-wrap: wrap; justify-content: center; } .theme-selector.theme-selector-inline .theme-option { flex: 1 1 calc(50% - 8px); min-width: 140px; justify-content: center; } } .google-layout main.container { flex: 1; max-width: 1200px; margin: 0 auto; padding: 32px 24px 72px; width: 100%; box-sizing: border-box; } .field-helper { color: var(--helper-text); font-size: 0.95rem; font-weight: 300; margin: 0.35rem 0 0; } .page-title-header { margin-bottom: 60px; text-align: center; } .center-content > .page-title-header { margin-bottom: 24px; } .page-title-header h1 { font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(2rem, 5vw, 3rem); font-weight: 400; margin: 0 0 0.5rem; color: var(--text); } .highlights-lede { font-family: 'Playfair Display', serif; font-size: clamp(1.25rem, 3vw, 1.75rem); font-style: italic; color: var(--text); margin: 0 0 0.65rem; } .section-subtitle { font-size: 1.1rem; border-bottom: 1px solid var(--border); padding-bottom: 5px; color: var(--accent); font-weight: 400; margin: 0 0 8px; } .section-content { text-align: left; } .section-body-text { font-size: 0.9rem; color: var(--helper-text); line-height: 1.65; margin: 0 0 16px; } .section-body-list { font-size: 0.9rem; color: var(--helper-text); line-height: 1.8; margin: 0; padding-left: 1.25rem; } /* Reusable layout/utilities (phase 2 normalization) */ .content-max-700 { max-width: 700px; } .section-gap-25 { margin-bottom: 25px; } .mt-15 { margin-top: 15px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; } .mt-22 { margin-top: 22px; } .mt-24 { margin-top: 24px; } .mt-40 { margin-top: 40px; } .inline-block { display: inline-block; } .link-helper { font-size: 0.9rem; color: var(--helper-text); } .skip-link-hidden { position: absolute; left: -10000px; } .is-hidden { display: none; } .pos-relative { position: relative; } .search-submit-btn { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--accent); } .empty-state-pad { padding: 80px 0; } .empty-state-note { opacity: 0.55; font-style: italic; color: var(--helper-text); } .mt-25 { margin-top: 25px; } .title-error { color: #d93025; } .title-success { color: var(--accent); } .code-pill { background: #f8f9fa; padding: 15px; border-radius: 8px; font-family: monospace; font-size: 1.5rem; margin: 20px 0; border: 1px dashed var(--accent); } .archive-timeline { position: relative; padding-left: 44px; margin-bottom: 50px; max-width: 720px; margin-left: auto; margin-right: auto; } .archive-timeline::before { content: ''; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--accent), var(--border)); border-radius: 2px; opacity: 0.55; } .timeline-node { position: relative; margin-bottom: 2.75rem; } .timeline-marker { position: absolute; left: -38px; top: 1.35rem; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg); } .timeline-date { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); font-weight: 600; } .archive-live-badge { display: inline-block; margin-left: 10px; padding: 3px 10px; border-radius: 999px; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; background: var(--accent); color: #fff; vertical-align: middle; } .archive-card--live { box-shadow: none; border-color: var(--accent); } .timeline-phrase { margin-top: 18px; } .timeline-slot-meta { font-size: 0.75rem; opacity: 0.85; color: var(--helper-text); } .timeline-love-icon { display: inline-block; vertical-align: -2px; margin-left: 2px; filter: grayscale(100%) opacity(0.72); } .archive-card { background: var(--card-bg); border: 1px solid var(--border); padding: 35px; border-radius: 20px; display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease; animation: fadeInUpScale 0.6s ease forwards; } .archive-card:hover { transform: none; box-shadow: none; } .archive-card .phrase-text { font-family: 'Playfair Display', serif; font-size: 1.4rem; line-height: 1.4; color: var(--text); margin-bottom: 25px; font-style: italic; } .archive-meta { border-top: 1px solid var(--border); padding-top: 15px; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: var(--helper-text); } .archive-meta .author { font-weight: 700; color: var(--text); } /* Paginación */ .pagination { display: flex; justify-content: center; gap: 10px; margin-top: 40px; } .pagination a { padding: 10px 18px; border-radius: 10px; border: 1px solid var(--border); text-decoration: none; color: var(--text); font-size: 0.9rem; transition: all 0.2s; } .pagination a.active { background: var(--accent); color: #fff; border-color: var(--accent); } .pagination a:hover:not(.active) { background: var(--border); } /* Buscador del Archivo */ .archive-search-form { max-width: 500px; margin: 30px auto; } .archive-search-form input { width: 100%; padding: 12px 25px; border-radius: 50px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text); outline: none; } /* Responsive para Archivo */ @media (max-width: 600px) { .archive-timeline { padding-left: 36px; margin-left: 0; margin-right: 0; } .timeline-marker { left: -32px; } .archive-card { padding: 25px; } } .archive-card.theme-classic { --card-bg: #ffffff; --text: #1a1a1a; --border: #e8eaed; --helper-text: #70757a; --accent: var(--site-accent); } .archive-card.theme-night { --card-bg: #323338; --text: #dde0e5; --border: #43444d; --helper-text: #9aa1ac; } .archive-card.theme-sepia { --card-bg: #fdfaf3; --text: #433422; --border: #e0d7c1; --helper-text: #6d5d48; } .archive-card.theme-sage { --card-bg: #f4faf4; --text: #202124; --border: #c8e6c9; --helper-text: #588157; }