/* ================================================================= * paper-cards.css — shared card styles for static public pages * (about · contact · privacy · terms) * * Pages must still declare their own: * • font-family reset (* { font-family: 'Tajawal' }) * • body background + CSS variable seeds (--page-accent etc.) * • any page-unique elements (form buttons, field-opacity, etc.) * * CSS variables consumed: * --page-accent accent colour (default teal #0d9488) * --page-surface card surface colour (default #ffffff) * --page-text body text colour (default #0f172a) * --rattl-card-bg managed by page-theme-cards.js card theme * --rattl-card-blur managed by page-theme-cards.js card theme * --card-bg-image/overlay per-card background managed by page-theme-cards.js * --field-opacity contact field transparency (contact.html only) * ================================================================= */ /* ── scrollbar ─────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-thumb { background: #14b8a655; border-radius: 3px; } /* ── glass utility ─────────────────────────────────────────── */ .glass { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* ── shell + layout ────────────────────────────────────────── */ .theme-shell { width: min(100%, 1160px); margin-inline: auto; padding: clamp(1rem, 2vw, 1.75rem); } /* Unified grid layout for all static pages. Each child <.paper-sheet> becomes a full-width row. privacy.html and terms.html previously used 920px; unified to 980px here to match contact/about and give legal cards the same consistent width. */ .paper-layout { max-width: 980px; margin-inline: auto; display: grid; gap: 1.15rem; } .paper-layout--compact { gap: .9rem; } /* ── card shell ─────────────────────────────────────────────── */ /* * NOTE: The corner-glow previously rendered via .paper-sheet::before is * intentionally merged into the background shorthand here. This frees * the ::before pseudo-element for page-theme-cards.js which uses it to * render the owner-configured full-card background image. * * When page-theme-cards.js activates (data-cms-card-bg-key is present on * the element), its injected runtime CSS overrides `background` with * `var(--rattl-card-bg, rgba(255,255,255,.88))`. At that point the card * becomes semi-transparent and the ::before image layer shows through. * Without any owner customisation the card retains the gradient below. */ .paper-sheet { position: relative; border-radius: 30px; border: 1px solid color-mix(in srgb, var(--page-accent) 20%, transparent); background: radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--page-accent) 14%, transparent), transparent 42% ), linear-gradient(180deg, color-mix(in srgb, var(--page-surface) 94%, white), color-mix(in srgb, var(--page-surface) 82%, white) ); box-shadow: 0 24px 56px rgba(15, 23, 42, .12), 0 6px 18px rgba(13, 148, 136, .1); overflow: hidden; } /* ── anti-flicker reveal ───────────────────────────────────────── * The themed sheet (owner accent colours + hero image) is applied by * page-cms-loader.js / page-theme-cards.js AFTER first paint, which causes * a brief flash: the accent recolours and the hero image pops in, shifting * the layout. Pages opt in by adding class "js-reveal" to via a tiny * inline head script, then "cms-ready" once the page has settled (window * 'load' or a capped timeout). The sheet stays invisible while it settles, * then fades in. With JS disabled neither class is set, so the sheet shows * normally (no dependency on JS to become visible). */ html.js-reveal .paper-sheet { opacity: 0; } html.js-reveal.cms-ready .paper-sheet { opacity: 1; transition: opacity .28s ease; } @media (prefers-reduced-motion: reduce) { html.js-reveal.cms-ready .paper-sheet { transition: none; } } /* ── card header ────────────────────────────────────────────── */ .paper-top { border-bottom: 1px solid color-mix(in srgb, var(--page-accent) 18%, transparent); background: linear-gradient(145deg, color-mix(in srgb, var(--page-accent) 10%, transparent), rgba(255, 255, 255, .88) ); padding: 1.5rem 1.4rem 1.15rem; } /* ── card body ──────────────────────────────────────────────── */ .paper-content { padding: 1.3rem 1.4rem 1.8rem; line-height: 2; color: #334155; } .paper-content > * + * { margin-top: .7rem; } .paper-content a { color: var(--page-accent); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2rem; } .paper-content h1, .paper-content h2, .paper-content h3 { color: var(--page-text); font-weight: 900; margin-top: 1.3rem; margin-bottom: .4rem; } .paper-content h1 { font-size: 2rem; } .paper-content h2 { font-size: 1.8rem; } .paper-content h3 { font-size: 1.28rem; } .paper-content p { border: 1px solid color-mix(in srgb, var(--page-accent) 10%, rgba(226, 232, 240, .9)); background: color-mix(in srgb, var(--page-surface) 80%, white); border-radius: 14px; padding: .72rem .9rem; } .paper-content h1 + p, .paper-content h2 + p, .paper-content h3 + p { margin-top: .35rem; } .paper-content--legal { padding-top: 1.05rem; padding-bottom: 1.3rem; } .paper-content--legal > * + * { margin-top: .55rem; } .paper-content--legal h1:first-child, .paper-content--legal h2:first-child, .paper-content--legal h3:first-child { margin-top: 0; } .paper-content--legal p, .paper-content--legal li { border: 0; background: transparent; border-radius: 0; padding: 0; } .paper-content--legal ul, .paper-content--legal ol { margin: 0; padding-right: 1.15rem; padding-left: 0; padding-inline: 1.15rem 0; } .paper-content--legal li + li { margin-top: .4rem; } .contact-grid { display: grid; gap: .9rem; align-items: start; } .contact-summary-sheet { display: grid; } .contact-support { padding-top: 1rem; } /* Contact info rows (email / WhatsApp / phone) should be clean text rows, not individual mini-cards — reset the .paper-content p card styling. */ .contact-support p { margin-top: 0; border: none; background: transparent; border-radius: 0; padding: .25rem 0; } .contact-support p + p { margin-top: .4rem; } /* ── decorative elements ─────────────────────────────────────── */ /* pin dots shown in hero card corners */ .paper-pin { position: absolute; top: 14px; width: 15px; height: 15px; border-radius: 999px; background: linear-gradient(145deg, var(--page-accent), color-mix(in srgb, var(--page-accent) 70%, white) ); box-shadow: 0 2px 6px rgba(15, 23, 42, .35); } .paper-pin.right { right: 16px; } .paper-pin.left { left: 16px; } /* stamp watermark (PRIVACY / TERMS …) */ .paper-stamp { display: inline-flex; align-items: center; justify-content: center; min-width: 112px; min-height: 112px; border-radius: 999px; border: 2px dashed color-mix(in srgb, var(--page-accent) 45%, transparent); color: var(--page-accent); background: color-mix(in srgb, var(--page-accent) 9%, transparent); font-weight: 900; font-size: .88rem; letter-spacing: .05em; transform: rotate(-7deg); user-select: none; } /* inline hero image inside the card header */ .paper-hero-image { width: 100%; max-height: 270px; object-fit: cover; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--page-accent) 24%, transparent); margin-bottom: 1rem; box-shadow: 0 10px 28px rgba(15, 23, 42, .12); } /* "why" highlight points — about.html */ .paper-point { border: 1px solid color-mix(in srgb, var(--page-accent) 22%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--page-surface) 94%, white), color-mix(in srgb, var(--page-accent) 10%, var(--page-surface)) ); border-radius: 16px; padding: .95rem 1rem; box-shadow: 0 10px 24px rgba(15, 23, 42, .06); } /* form inputs — contact.html */ .paper-input { width: 100%; border-radius: 1rem; border: 1px solid color-mix(in srgb, var(--page-accent) 25%, transparent); background: rgba(var(--rattl-page-surface-rgb, 255, 255, 255), var(--field-opacity, 0)); padding: .92rem 1rem; outline: none; transition: .2s; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); } .paper-input:focus { border-color: var(--page-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--page-accent) 12%, transparent); } /* ── footer ─────────────────────────────────────────────────── */ .footer-link { color: #475569; } .footer-link:hover { color: var(--page-accent); } @media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); } } /* ── responsive ─────────────────────────────────────────────── */ @media (max-width: 640px) { .theme-shell { padding: .85rem; } .paper-sheet { border-radius: 24px; } .paper-top { padding: 1rem .95rem .8rem; } .paper-content { padding: 1rem .95rem 1.35rem; } .paper-content--legal { padding-top: .9rem; } .paper-stamp { min-width: 86px; min-height: 86px; font-size: .74rem; } .paper-content h1 { font-size: 1.75rem; } .paper-content h2 { font-size: 1.55rem; } .paper-content h3 { font-size: 1.14rem; } }