/* ========================================================================== Divination — base design system Dark mystical palette: deep violet/indigo surfaces, gold highlights, readable light text. Serif display headings, system body stack. RTL contract: all direction-sensitive layout uses CSS logical properties (margin-inline, padding-inline, inset-*, text-align: start, border-inline-*), so mirrors the layout automatically. [dir="rtl"] overrides exist only where logical properties cannot express the mirror (background gradient positions). ========================================================================== */ /* -------------------------------------------------------------------------- 1. Design tokens -------------------------------------------------------------------------- */ :root { /* Palette */ --color-bg: #0d0a1a; --color-bg-soft: #14102a; --color-surface: #1b1440; --color-surface-raised: #251b52; --color-text: #efe9f8; --color-text-muted: #b6abd4; --color-gold: #d4af37; --color-gold-bright: #f0d98c; --color-gold-deep: #b8912b; --color-violet: #8b6ff0; --color-border: rgba(212, 175, 55, 0.18); --color-border-strong: rgba(212, 175, 55, 0.42); --color-whatsapp: #25d366; --color-whatsapp-hover: #1fb457; --color-on-gold: #241a00; --color-on-whatsapp: #062b14; --color-error: #ef9a9a; --color-success: #a5d6a7; --color-info: #90caf9; /* Typography */ --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; /* Spacing scale (8px base) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* Radii & shadows */ --radius-sm: 0.375rem; --radius-md: 0.75rem; --radius-lg: 1.25rem; --shadow-card: 0 10px 32px rgba(0, 0, 0, 0.38); --shadow-gold: 0 4px 18px rgba(212, 175, 55, 0.35); /* Layout */ --container-width: 1100px; /* Motion */ --transition-fast: 150ms ease; --transition-med: 260ms ease; } /* -------------------------------------------------------------------------- 2. Reset & base elements -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-block-size: 100vh; font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: var(--color-text); background: radial-gradient(60rem 42rem at 85% -10%, rgba(139, 111, 240, 0.16), transparent 62%), radial-gradient(48rem 36rem at 0% 100%, rgba(212, 175, 55, 0.07), transparent 60%), var(--color-bg); background-attachment: fixed; } /* The gradient anchor points above are physical percentages; mirror them for RTL so the atmosphere stays balanced. */ [dir="rtl"] body { background: radial-gradient(60rem 42rem at 15% -10%, rgba(139, 111, 240, 0.16), transparent 62%), radial-gradient(48rem 36rem at 100% 100%, rgba(212, 175, 55, 0.07), transparent 60%), var(--color-bg); background-attachment: fixed; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; color: var(--color-gold-bright); margin-block-start: 0; margin-block-end: var(--space-4); letter-spacing: 0.01em; } p { margin-block-start: 0; margin-block-end: var(--space-4); } a { color: var(--color-gold-bright); transition: color var(--transition-fast); } a:hover { color: var(--color-gold); } img, svg { max-inline-size: 100%; block-size: auto; } ul { padding-inline-start: var(--space-6); } :focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; border-radius: var(--radius-sm); } /* -------------------------------------------------------------------------- 3. Layout primitives -------------------------------------------------------------------------- */ .container { max-inline-size: var(--container-width); margin-inline: auto; padding-inline: var(--space-4); } .site-main { min-block-size: 60vh; } .section { padding-block: var(--space-16); } .section__title { font-size: clamp(1.8rem, 3vw, 2.6rem); text-align: center; margin-block-end: var(--space-8); } .section__lead { max-inline-size: 46rem; margin-inline: auto; text-align: center; color: var(--color-text-muted); margin-block-end: var(--space-10); } .skip-link { position: absolute; inset-block-start: -100%; inset-inline-start: var(--space-4); padding-block: var(--space-2); padding-inline: var(--space-4); background: var(--color-gold); color: var(--color-on-gold); border-radius: var(--radius-sm); z-index: 200; text-decoration: none; } .skip-link:focus-visible { inset-block-start: var(--space-3); } /* -------------------------------------------------------------------------- 4. Header & navigation -------------------------------------------------------------------------- */ .site-header { position: sticky; inset-block-start: 0; z-index: 50; background: rgba(13, 10, 26, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-block-end: 1px solid var(--color-border); } .site-header__inner { display: flex; align-items: center; gap: var(--space-6); padding-block: var(--space-3); } .site-header__logo { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--color-gold-bright); text-decoration: none; margin-inline-end: auto; white-space: nowrap; } .site-header__logo:hover { color: var(--color-gold); } .site-nav__list { display: flex; align-items: center; gap: var(--space-5); margin: 0; padding: 0; list-style: none; } .site-nav__link { color: var(--color-text-muted); text-decoration: none; font-weight: 500; padding-block: var(--space-1); border-block-end: 2px solid transparent; transition: color var(--transition-fast), border-color var(--transition-fast); } .site-nav__link:hover { color: var(--color-gold-bright); border-block-end-color: var(--color-gold); } /* -------------------------------------------------------------------------- 5. Language switcher -------------------------------------------------------------------------- */ .language-switcher { display: flex; align-items: center; gap: var(--space-1); } .language-switcher__btn { display: inline-block; font: inherit; font-size: 0.85rem; text-decoration: none; padding-block: var(--space-1); padding-inline: var(--space-2); background: transparent; color: var(--color-text-muted); border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); } .language-switcher__btn:hover { color: var(--color-gold-bright); border-color: var(--color-border); } .language-switcher__btn.is-active, .language-switcher__btn[aria-current] { color: var(--color-gold); border-color: var(--color-border-strong); background: rgba(212, 175, 55, 0.08); } /* -------------------------------------------------------------------------- 6. Buttons -------------------------------------------------------------------------- */ .btn { display: inline-block; font: inherit; font-weight: 600; text-align: center; text-decoration: none; padding-block: var(--space-3); padding-inline: var(--space-6); border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primary { background: linear-gradient(135deg, var(--color-gold), var(--color-gold-deep)); color: var(--color-on-gold); box-shadow: var(--shadow-gold); } .btn--primary:hover { color: var(--color-on-gold); box-shadow: 0 6px 26px rgba(212, 175, 55, 0.5); } .btn--whatsapp { background: var(--color-whatsapp); color: var(--color-on-whatsapp); } .btn--whatsapp:hover { background: var(--color-whatsapp-hover); color: var(--color-on-whatsapp); } .btn--telegram { background: transparent; border-color: var(--color-border-strong); color: var(--color-gold-bright); } .btn--telegram:hover { border-color: var(--color-gold); color: var(--color-gold); } /* -------------------------------------------------------------------------- 7. Cards grid -------------------------------------------------------------------------- */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); margin: 0; padding: 0; list-style: none; } .card { background: linear-gradient(160deg, var(--color-surface), var(--color-bg-soft)); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-card); transition: transform var(--transition-med), border-color var(--transition-med); } .card:hover { transform: translateY(-4px); border-color: var(--color-border-strong); } .card__title { font-size: 1.25rem; margin-block-end: var(--space-3); } .card__text { color: var(--color-text-muted); margin-block-end: 0; } /* -------------------------------------------------------------------------- 8. FAQ accordion Contract: .faq__item > button.faq__question[aria-expanded] + sibling .faq__answer[hidden] -------------------------------------------------------------------------- */ .faq { max-inline-size: 60rem; margin-inline: auto; } .faq__item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-block-end: var(--space-3); overflow: hidden; } .faq__question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); inline-size: 100%; font: inherit; font-weight: 600; text-align: start; color: var(--color-text); background: none; border: 0; padding-block: var(--space-4); padding-inline: var(--space-6); cursor: pointer; transition: color var(--transition-fast); } .faq__question:hover { color: var(--color-gold-bright); } .faq__question::after { content: ""; flex-shrink: 0; inline-size: 0.55rem; block-size: 0.55rem; border-inline-end: 2px solid var(--color-gold); border-block-end: 2px solid var(--color-gold); transform: rotate(45deg); transition: transform var(--transition-med); } .faq__question[aria-expanded="true"] { color: var(--color-gold-bright); } .faq__question[aria-expanded="true"]::after { transform: rotate(225deg); } .faq__answer { padding-inline: var(--space-6); padding-block-end: var(--space-5); color: var(--color-text-muted); } .faq__answer[hidden] { display: none; } .faq__answer > :last-child { margin-block-end: 0; } /* -------------------------------------------------------------------------- 9. Contact form -------------------------------------------------------------------------- */ .contact-form { max-inline-size: 40rem; margin-inline: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-card); } .contact-form__field { margin-block-end: var(--space-4); } .contact-form__field label { display: block; margin-block-end: var(--space-2); font-weight: 600; color: var(--color-gold-bright); } .contact-form input, .contact-form select, .contact-form textarea { inline-size: 100%; font: inherit; color: var(--color-text); background: var(--color-bg-soft); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding-block: var(--space-3); padding-inline: var(--space-4); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--color-text-muted); opacity: 0.65; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25); } .contact-form textarea { resize: vertical; } .contact-form .contact-form__consent { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; } .contact-form .contact-form__consent input[type="checkbox"] { width: 1.15rem; height: 1.15rem; flex-shrink: 0; margin: 0; margin-block-start: 0.15rem; accent-color: var(--color-gold); } .contact-form .contact-form__consent span { font-weight: 400; font-size: 0.95rem; color: var(--color-text-muted); } .contact-form .contact-form__consent a { color: var(--color-gold); } .contact-form__hint { margin-block-start: var(--space-2); margin-block-end: 0; font-size: 0.85rem; color: var(--color-text-muted); } .contact-form .errorlist { list-style: none; margin: var(--space-2) 0 0; padding: 0; font-size: 0.9rem; color: var(--color-error); } .contact-form__errors { margin-block-end: var(--space-5); padding-block: var(--space-3); padding-inline: var(--space-4); background: rgba(239, 154, 154, 0.1); border: 1px solid var(--color-error); border-radius: var(--radius-md); color: var(--color-error); } .contact-form__errors ul { list-style: none; margin: 0; padding: 0; } .contact-form__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-block-start: var(--space-6); } /* -------------------------------------------------------------------------- 10. Toast messages (Django messages framework) -------------------------------------------------------------------------- */ .toasts { position: fixed; inset-block-end: var(--space-6); inset-inline-end: var(--space-6); z-index: 100; display: flex; flex-direction: column; gap: var(--space-3); max-inline-size: min(24rem, calc(100vw - 2rem)); margin: 0; padding: 0; list-style: none; } .toast { display: flex; align-items: flex-start; gap: var(--space-3); background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); border-inline-start: 4px solid var(--color-gold); border-radius: var(--radius-md); padding-block: var(--space-3); padding-inline: var(--space-4); box-shadow: var(--shadow-card); } .toast--success { border-inline-start-color: var(--color-success); } .toast--error { border-inline-start-color: var(--color-error); } .toast--warning { border-inline-start-color: var(--color-gold); } .toast--info { border-inline-start-color: var(--color-info); } .toast__text { flex: 1; } .toast__close { flex-shrink: 0; font: inherit; font-size: 1.25rem; line-height: 1; background: none; border: 0; padding: 0; color: var(--color-text-muted); cursor: pointer; transition: color var(--transition-fast); } .toast__close:hover { color: var(--color-text); } /* -------------------------------------------------------------------------- 11. Footer -------------------------------------------------------------------------- */ .site-footer { margin-block-start: var(--space-16); padding-block: var(--space-8); background: rgba(0, 0, 0, 0.28); border-block-start: 1px solid var(--color-border); } .site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); } .site-footer__copy { margin: 0; color: var(--color-text-muted); font-size: 0.9rem; } .site-footer__contacts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0; padding: 0; list-style: none; } .site-footer__contacts .btn { padding-block: var(--space-2); padding-inline: var(--space-4); font-size: 0.9rem; } .site-footer__phone { color: var(--color-text-muted); text-decoration: none; } .site-footer__phone:hover { color: var(--color-gold-bright); } /* -------------------------------------------------------------------------- 12. Responsive — 768px breakpoint -------------------------------------------------------------------------- */ @media (max-width: 768px) { .site-header__inner { flex-wrap: wrap; gap: var(--space-3); } .site-header__logo { margin-inline-end: 0; } .language-switcher { margin-inline-start: auto; } .site-nav { order: 3; inline-size: 100%; } .site-nav__list { justify-content: center; gap: var(--space-4); } .section { padding-block: var(--space-12); } .contact-form { padding: var(--space-6); } .contact-form__actions .btn { inline-size: 100%; } .toasts { inset-inline: var(--space-4); inset-block-end: var(--space-4); max-inline-size: none; } .site-footer__inner { flex-direction: column; text-align: center; justify-content: center; } .site-footer__contacts { justify-content: center; } } /* -------------------------------------------------------------------------- 14. Card link (service & blog cards) -------------------------------------------------------------------------- */ .card__link { display: inline-block; margin-block-start: var(--space-4); font-weight: 600; text-decoration: none; border-block-end: 1px solid transparent; transition: color var(--transition-fast), border-color var(--transition-fast); } .card__link:hover { border-block-end-color: var(--color-gold); } .card__link::after { content: "\2192"; /* rightwards arrow */ display: inline-block; margin-inline-start: var(--space-2); transition: transform var(--transition-fast); } .card__link:hover::after { transform: translateX(0.25em); } /* Arrow direction is physical; mirror it for RTL. */ [dir="rtl"] .card__link::after { content: "\2190"; /* leftwards arrow */ } [dir="rtl"] .card__link:hover::after { transform: translateX(-0.25em); } /* -------------------------------------------------------------------------- 15. Hero (landing) -------------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; padding-block: var(--space-16); background: radial-gradient(36rem 24rem at 88% 20%, rgba(212, 175, 55, 0.14), transparent 65%), radial-gradient(30rem 26rem at 12% 85%, rgba(139, 111, 240, 0.18), transparent 60%); } /* Gradient anchors are physical percentages; mirror for RTL. */ [dir="rtl"] .hero { background: radial-gradient(36rem 24rem at 12% 20%, rgba(212, 175, 55, 0.14), transparent 65%), radial-gradient(30rem 26rem at 88% 85%, rgba(139, 111, 240, 0.18), transparent 60%); } .hero__inner { display: grid; grid-template-columns: 1.2fr 0.8fr; align-items: center; gap: var(--space-10); } .hero__title { font-size: clamp(2rem, 4.5vw, 3.4rem); margin-block-end: var(--space-5); } .hero__subtitle { max-inline-size: 36rem; color: var(--color-text-muted); font-size: 1.1rem; margin-block-end: var(--space-8); } .hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); } .hero__phone { font-weight: 600; font-size: 1.05rem; text-decoration: none; color: var(--color-text); } .hero__phone:hover { color: var(--color-gold-bright); } /* Decorative mystical visual: layered conic/radial rings behind the image, pure CSS, no external assets. */ .hero__visual { position: relative; display: grid; place-items: center; min-block-size: 20rem; } .hero__visual::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 70%, rgba(212, 175, 55, 0.55) 78%, transparent 86%), radial-gradient(closest-side, rgba(139, 111, 240, 0.22), rgba(27, 20, 64, 0.4) 62%, transparent 72%); border: 1px solid var(--color-border-strong); box-shadow: 0 0 60px rgba(212, 175, 55, 0.18), inset 0 0 44px rgba(139, 111, 240, 0.25); } .hero__visual::after { content: ""; position: absolute; inset: 20%; border-radius: 50%; border: 1px dashed var(--color-border-strong); } .hero__visual-img { position: relative; inline-size: min(55%, 16rem); border-radius: 50%; filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.5)); } /* -------------------------------------------------------------------------- 16. Work stages (numbered list) -------------------------------------------------------------------------- */ .stages { counter-reset: stage; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); } .stages__item { counter-increment: stage; position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding-block: var(--space-8) var(--space-6); padding-inline: var(--space-6); } .stages__item::before { content: counter(stage); position: absolute; inset-block-start: calc(-1 * var(--space-5)); inset-inline-start: var(--space-6); display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--color-on-gold); background: linear-gradient(135deg, var(--color-gold), var(--color-gold-deep)); border-radius: 50%; box-shadow: var(--shadow-gold); } .stages__title { font-size: 1.15rem; margin-block-end: var(--space-2); } .stages__text { color: var(--color-text-muted); margin-block-end: 0; } /* -------------------------------------------------------------------------- 17. Testimonials -------------------------------------------------------------------------- */ .testimonial { display: flex; flex-direction: column; gap: var(--space-3); } .testimonial__rating { display: flex; gap: var(--space-1); font-size: 1.1rem; line-height: 1; } .testimonial__star { color: rgba(212, 175, 55, 0.3); } .testimonial__star--filled { color: var(--color-gold); } .testimonial__text { color: var(--color-text); margin-block-end: 0; flex: 1; } .testimonial__author { display: flex; flex-direction: column; gap: var(--space-1); border-block-start: 1px solid var(--color-border); padding-block-start: var(--space-3); } .testimonial__author-name { font-weight: 600; color: var(--color-gold-bright); } .testimonial__author-meta { font-size: 0.85rem; color: var(--color-text-muted); } /* -------------------------------------------------------------------------- 18. Breadcrumbs -------------------------------------------------------------------------- */ .breadcrumbs { padding-block-start: var(--space-6); } .breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: 0.9rem; color: var(--color-text-muted); } .breadcrumbs__item + .breadcrumbs__item::before { content: "/"; margin-inline-end: var(--space-2); color: var(--color-border-strong); } .breadcrumbs__link { color: var(--color-text-muted); text-decoration: none; } .breadcrumbs__link:hover { color: var(--color-gold-bright); } .breadcrumbs__item[aria-current] { color: var(--color-gold-bright); } /* -------------------------------------------------------------------------- 19. Service detail -------------------------------------------------------------------------- */ .service-detail { padding-block: var(--space-8); } .service-detail__header { max-inline-size: 46rem; margin-inline: auto; text-align: center; } .service-detail__title { font-size: clamp(1.9rem, 3.5vw, 2.8rem); } .service-detail__image { display: block; max-inline-size: 42rem; margin-inline: auto; margin-block-end: var(--space-8); border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); } .service-detail__body { max-inline-size: 46rem; margin-inline: auto; } /* -------------------------------------------------------------------------- 20. Blog — category chips, cards, pagination -------------------------------------------------------------------------- */ .category-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-block-end: var(--space-10); } .category-chips__chip { display: inline-block; text-decoration: none; font-size: 0.9rem; font-weight: 500; padding-block: var(--space-1); padding-inline: var(--space-4); color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); } .category-chips__chip:hover { color: var(--color-gold-bright); border-color: var(--color-border-strong); } .category-chips__chip--active { color: var(--color-on-gold); background: linear-gradient(135deg, var(--color-gold), var(--color-gold-deep)); border-color: transparent; } .blog-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; } .blog-card__cover { display: block; overflow: hidden; } .blog-card__cover img { display: block; inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform var(--transition-med); } .blog-card:hover .blog-card__cover img { transform: scale(1.04); } .blog-card__body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; } .blog-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: 0.85rem; color: var(--color-text-muted); margin-block-end: var(--space-3); } .blog-card__category { color: var(--color-gold-bright); text-decoration: none; } .blog-card__title-link { color: inherit; text-decoration: none; } .blog-card__title-link:hover { color: var(--color-gold); } .pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); margin-block-start: var(--space-10); } .pagination__link { display: inline-block; text-decoration: none; font-weight: 600; padding-block: var(--space-2); padding-inline: var(--space-5); color: var(--color-gold-bright); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: color var(--transition-fast), border-color var(--transition-fast); } .pagination__link:hover { border-color: var(--color-gold); color: var(--color-gold); } .pagination__link--disabled { color: var(--color-text-muted); opacity: 0.55; pointer-events: none; } .pagination__current { font-size: 0.9rem; color: var(--color-text-muted); } /* -------------------------------------------------------------------------- 21. Post detail -------------------------------------------------------------------------- */ .post-detail { padding-block: var(--space-8); max-inline-size: 48rem; } .post-detail__header { text-align: start; } .post-detail__title { font-size: clamp(1.9rem, 3.5vw, 2.8rem); } .post-detail__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: 0.9rem; color: var(--color-text-muted); margin-block-end: var(--space-6); } .post-detail__category { color: var(--color-gold-bright); text-decoration: none; } .post-detail__cover { display: block; inline-size: 100%; margin-block-end: var(--space-8); border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); } .post-detail__excerpt { font-size: 1.1rem; color: var(--color-text-muted); border-inline-start: 3px solid var(--color-gold); padding-inline-start: var(--space-4); } .post-detail__body { margin-block-end: var(--space-8); } .post-detail__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; } .post-detail__tag { font-size: 0.8rem; padding-block: var(--space-1); padding-inline: var(--space-3); color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; } /* -------------------------------------------------------------------------- 22. Responsive additions — 768px -------------------------------------------------------------------------- */ @media (max-width: 768px) { .hero { padding-block: var(--space-12); } .hero__inner { grid-template-columns: 1fr; text-align: center; } .hero__subtitle { margin-inline: auto; } .hero__cta { justify-content: center; } .hero__visual { min-block-size: 14rem; order: -1; } .stages__item::before { inset-inline-start: var(--space-5); } } /* -------------------------------------------------------------------------- 14. Feature blocks (rich landing info sections) -------------------------------------------------------------------------- */ .section__actions { display: flex; justify-content: center; margin-block-start: var(--space-8); } .feature { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: center; padding-block: var(--space-10); border-block-end: 1px solid var(--color-border); } .feature:last-child { border-block-end: 0; } .feature--alt .feature__content { order: 2; } .feature__kicker { color: var(--color-gold); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-block-end: var(--space-2); } .feature__title { font-family: var(--font-display); color: var(--color-gold-bright); font-size: clamp(1.5rem, 2.4vw, 2rem); margin-block: 0 var(--space-4); } .feature__body { color: var(--color-text-muted); line-height: 1.7; } .feature__list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); } .feature__list-item { position: relative; padding-inline-start: var(--space-6); color: var(--color-text); } .feature__list-item::before { content: "✦"; position: absolute; inset-inline-start: 0; color: var(--color-gold); } .feature__img { inline-size: 100%; border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); } @media (min-width: 900px) { .feature:has(.feature__media) { grid-template-columns: 1.2fr 1fr; } } /* -------------------------------------------------------------------------- 13. Reduced motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }