/* ═══════════════════════════════════════════════════════════ Cybe T&T Theme — Smart Luxury Travel Full dark / light neumorphic design system. CSS custom properties are seeded by the plugin (front-end.php) and toggled at runtime by theme.js via [data-theme] on . ═══════════════════════════════════════════════════════════ */ /* ── Design tokens (plugin overrides these at runtime) ── */ :root { /* Brand */ --cybe-brand: #0000FF; --cybe-brand-dim: rgba(0, 0, 255, .12); --cybe-brand-glow: rgba(0, 0, 255, .28); /* Light mode palette */ --cybe-bg-light: #F0F0FA; --cybe-surf-light: #FFFFFF; --cybe-text-light: #111128; /* Dark mode palette */ --cybe-bg-dark: #0D0D1A; --cybe-surf-dark: #13131F; --cybe-text-dark: #E0E0F0; /* Neumorphic shadow tokens — recomputed per mode below */ --neu-out: 4px 4px 12px rgba(0,0,40,.10), -2px -2px 8px rgba(255,255,255,.85), 0 0 0 1px rgba(0,0,40,.06); --neu-in: inset 3px 3px 8px rgba(0,0,40,.12), inset -3px -3px 8px rgba(255,255,255,.75); --neu-flat: 0 0 0 1px rgba(0,0,40,.08); /* Typography */ --cybe-font-heading: 'Cormorant Garamond', serif; --cybe-font-body: 'Inter', sans-serif; /* Spacing / shape */ --r: 20px; --rsm: 12px; --rpill: 999px; --ease: 320ms cubic-bezier(.22, 1, .36, 1); /* Derive contextual tokens from mode (light default) */ --bg: var(--cybe-bg-light); --surf: var(--cybe-surf-light); --text: var(--cybe-text-light); --sub: rgba(17,17,40,.65); --muted: rgba(17,17,40,.42); } /* ── Dark mode overrides ── */ [data-theme="dark"] { --bg: var(--cybe-bg-dark); --surf: var(--cybe-surf-dark); --text: var(--cybe-text-dark); --sub: rgba(224,224,240,.7); --muted: rgba(224,224,240,.42); --neu-out: 4px 4px 14px rgba(0,0,0,.6), -2px -2px 8px rgba(255,255,255,.03), 0 0 0 1px rgba(255,255,255,.06); --neu-in: inset 3px 3px 8px rgba(0,0,0,.55), inset -3px -3px 8px rgba(255,255,255,.03); --neu-flat: 0 0 0 1px rgba(255,255,255,.06); --cybe-brand-dim: rgba(91,143,255,.14); --cybe-brand-glow: rgba(91,143,255,.32); } /* ── Base reset ── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--cybe-font-body); -webkit-font-smoothing: antialiased; line-height: 1.65; transition: background .35s ease, color .35s ease; } h1, h2, h3, h4, h5, h6 { font-family: var(--cybe-font-heading); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .5em; color: var(--text); } a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; display: block; } p { margin: 0 0 1em; } .cybe-container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 24px; } .cybe-section { padding: 96px 0; } .cybe-section--sm { padding: 56px 0; } /* ── Typography helpers ── */ .cybe-eyebrow { display: inline-block; font-family: var(--cybe-font-body); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--cybe-brand); font-weight: 700; margin-bottom: 10px; } .cybe-title { font-size: clamp(32px, 4.5vw, 52px); margin-bottom: 16px; } .cybe-subtitle { color: var(--sub); font-size: 17px; max-width: 600px; line-height: 1.7; } /* ── Neumorphic surfaces ── */ .cybe-card { background: var(--surf); border-radius: var(--r); box-shadow: var(--neu-out); transition: transform var(--ease), box-shadow var(--ease); overflow: hidden; } .cybe-card:hover { transform: translateY(-6px); } .cybe-neu-icon { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg); box-shadow: var(--neu-out); transition: box-shadow var(--ease), transform var(--ease); flex-shrink: 0; } .cybe-neu-icon:hover { box-shadow: var(--neu-in); transform: scale(.96); } /* ── Buttons ── */ .cybe-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 32px; border: 0; border-radius: var(--rpill); font-family: var(--cybe-font-body); font-weight: 700; font-size: 14px; letter-spacing: .04em; cursor: pointer; background: var(--cybe-brand); color: #fff; box-shadow: 0 6px 20px var(--cybe-brand-glow); transition: transform var(--ease), box-shadow var(--ease), background var(--ease); } .cybe-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 28px var(--cybe-brand-glow); } .cybe-btn:active { transform: translateY(0); box-shadow: var(--neu-in); } .cybe-btn--ghost { background: var(--bg); color: var(--text); box-shadow: var(--neu-out); } .cybe-btn--outline { background: transparent; color: var(--cybe-brand); border: 1.5px solid var(--cybe-brand); box-shadow: none; } .cybe-btn--outline:hover { background: var(--cybe-brand); color: #fff; } .cybe-btn--white { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.25); box-shadow: none; backdrop-filter: blur(8px); } .cybe-btn--white:hover { background: rgba(255,255,255,.28); } /* ── Header ── */ .cybe-header { position: sticky; top: 0; z-index: 900; background: rgba(var(--bg-rgb, 240,240,250), .82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--neu-flat); transition: box-shadow var(--ease); } [data-theme="dark"] .cybe-header { background: rgba(13,13,26,.82); border-bottom-color: rgba(255,255,255,.06); } .cybe-header.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.1); } .cybe-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; gap: 24px; } /* Logo */ .cybe-logo { display: flex; align-items: center; gap: 10px; font-family: var(--cybe-font-heading); font-size: 22px; font-weight: 700; color: var(--text); } .cybe-logo img { max-height: 44px; width: auto; } /* Nav */ .cybe-nav { display: flex; align-items: center; } .cybe-nav-list { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; } .cybe-nav-list a { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sub); position: relative; padding-bottom: 3px; transition: color var(--ease); } .cybe-nav-list a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--cybe-brand); transition: width var(--ease); } .cybe-nav-list a:hover, .cybe-nav-list li.current-menu-item a { color: var(--cybe-brand); } .cybe-nav-list a:hover::after, .cybe-nav-list li.current-menu-item a::after { width: 100%; } /* Header right */ .cybe-header-right { display: flex; align-items: center; gap: 14px; } /* ── Theme toggle ── */ .cybe-theme-toggle { display: flex; align-items: center; cursor: pointer; position: relative; } .cybe-theme-toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .cybe-toggle-track { position: relative; width: 52px; height: 28px; border-radius: 14px; background: var(--bg); box-shadow: var(--neu-in); transition: background .3s; } .cybe-toggle-track .moon, .cybe-toggle-track .sun { position: absolute; top: 50%; transform: translateY(-50%); font-size: 13px; line-height: 1; transition: opacity .3s; pointer-events: none; } .cybe-toggle-track .moon { left: 7px; opacity: 1; } .cybe-toggle-track .sun { right: 7px; opacity: 0; } .cybe-theme-toggle input:checked ~ .cybe-toggle-track .moon { opacity: 0; } .cybe-theme-toggle input:checked ~ .cybe-toggle-track .sun { opacity: 1; } .cybe-toggle-thumb { position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--cybe-brand); box-shadow: 0 2px 6px var(--cybe-brand-glow); transition: left .3s cubic-bezier(.34,1.56,.64,1); } .cybe-theme-toggle input:checked ~ .cybe-toggle-track .cybe-toggle-thumb, .cybe-theme-toggle.is-light .cybe-toggle-thumb { left: 28px; } /* Hamburger */ .cybe-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 4px; } .cybe-hamburger span { display: block; width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: transform var(--ease), opacity var(--ease); } /* ── Mobile drawer ── */ .cybe-mobile-menu { position: fixed; inset: 0; background: var(--bg); z-index: 990; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; transform: translateX(100%); transition: transform var(--ease); } .cybe-mobile-menu.open { transform: translateX(0); } .cybe-mobile-menu .cybe-nav-list { flex-direction: column; text-align: center; font-size: 18px; } .cybe-mobile-close { position: absolute; top: 20px; right: 20px; background: none; border: 0; font-size: 28px; cursor: pointer; color: var(--text); } /* ── Hero ── */ .cybe-hero { position: relative; min-height: 94vh; display: flex; align-items: center; color: #fff; overflow: hidden; } .cybe-hero__bg { position: absolute; inset: 0; z-index: 0; } .cybe-hero__bg img { width: 100%; height: 100%; object-fit: cover; } .cybe-hero__overlay { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(0,0,20,.68) 0%, rgba(0,0,40,.45) 50%, rgba(0,0,60,.75) 100%); } .cybe-hero__content { position: relative; z-index: 2; max-width: 760px; padding: 48px 40px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 28px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .cybe-hero__title { font-size: clamp(42px, 6vw, 76px); color: #fff; margin-bottom: 20px; } .cybe-hero__subtitle { font-size: 18px; color: rgba(255,255,255,.82); margin-bottom: 36px; max-width: 520px; } .cybe-hero__actions { display: flex; gap: 16px; flex-wrap: wrap; } /* Search bar in hero */ .cybe-search-bar { display: flex; align-items: center; background: var(--surf); border-radius: var(--rpill); box-shadow: var(--neu-out); padding: 8px 8px 8px 20px; gap: 12px; margin-top: 32px; } .cybe-search-bar input { flex: 1; border: 0; background: transparent; font-family: var(--cybe-font-body); font-size: 15px; color: var(--text); outline: none; } .cybe-search-bar input::placeholder { color: var(--muted); } .cybe-search-bar .cybe-btn { padding: 12px 24px; font-size: 13px; } /* ── Stats counter ── */ .cybe-stats { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 40px; } .cybe-stat { text-align: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: var(--rsm); padding: 16px 28px; backdrop-filter: blur(8px); } .cybe-stat__num { font-family: var(--cybe-font-heading); font-size: 36px; font-weight: 700; color: #fff; line-height: 1; } .cybe-stat__label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-top: 4px; } /* ── Grid layouts ── */ .cybe-grid { display: grid; gap: 28px; } .cybe-grid--2 { grid-template-columns: repeat(2, 1fr); } .cybe-grid--3 { grid-template-columns: repeat(3, 1fr); } .cybe-grid--4 { grid-template-columns: repeat(4, 1fr); } /* ── Tour / Destination card ── */ .cybe-tour-card .cybe-card__media, .cybe-dest-card .cybe-card__media { aspect-ratio: 4/3; overflow: hidden; } .cybe-tour-card .cybe-card__media img, .cybe-dest-card .cybe-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; } .cybe-tour-card:hover .cybe-card__media img, .cybe-dest-card:hover .cybe-card__media img { transform: scale(1.07); } .cybe-card__body { padding: 24px; } .cybe-card__title { font-size: 20px; margin-bottom: 8px; } .cybe-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 16px; flex-wrap: wrap; } .cybe-card__price { font-weight: 800; font-size: 20px; color: var(--cybe-brand); } .cybe-card__badge { position: absolute; top: 14px; left: 14px; background: var(--cybe-brand); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 5px 12px; border-radius: var(--rpill); z-index: 1; } .cybe-tour-card, .cybe-dest-card { position: relative; } /* ── Star rating ── */ .cybe-stars { display: inline-flex; gap: 2px; color: var(--cybe-brand); font-size: 15px; } .cybe-stars .empty { color: var(--muted); opacity: .4; } /* ── Feature tile ── */ .cybe-feature { text-align: center; padding: 36px 24px; } .cybe-feature__icon { width: 68px; height: 68px; margin: 0 auto 18px; border-radius: 50%; background: var(--bg); box-shadow: var(--neu-out); display: flex; align-items: center; justify-content: center; color: var(--cybe-brand); font-size: 28px; } .cybe-feature__title { font-size: 18px; margin-bottom: 8px; } .cybe-feature__desc { color: var(--sub); font-size: 14px; } /* ── How it works ── */ .cybe-step { display: flex; gap: 20px; padding: 28px; align-items: flex-start; } .cybe-step__num { width: 48px; height: 48px; border-radius: 50%; background: var(--cybe-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--cybe-font-heading); font-size: 20px; font-weight: 700; flex-shrink: 0; box-shadow: 0 4px 16px var(--cybe-brand-glow); } /* ── Testimonials ── */ .cybe-testi { padding: 32px; } .cybe-testi__quote { font-family: var(--cybe-font-heading); font-size: 19px; font-style: italic; margin-bottom: 20px; line-height: 1.55; color: var(--text); } .cybe-testi__author { display: flex; align-items: center; gap: 14px; } .cybe-testi__author img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; } .cybe-testi__name { font-weight: 700; font-size: 15px; } .cybe-testi__loc { font-size: 12px; color: var(--muted); } /* ── Gallery ── */ .cybe-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 14px; } .cybe-gallery__item { overflow: hidden; border-radius: var(--rsm); } .cybe-gallery__item:nth-child(5n+1) { grid-column: span 2; grid-row: span 2; } .cybe-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; } .cybe-gallery__item:hover img { transform: scale(1.07); } /* ── Partners ── */ .cybe-partners { display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; gap: 32px; } .cybe-partners img { max-height: 36px; filter: grayscale(1); opacity: .5; transition: filter var(--ease), opacity var(--ease); } .cybe-partners img:hover { filter: grayscale(0); opacity: 1; } /* ── FAQ ── */ .cybe-faq { max-width: 800px; margin: 0 auto; } .cybe-faq__item { margin-bottom: 12px; } .cybe-faq__q { width: 100%; background: none; border: 0; text-align: left; padding: 20px 24px; font-family: var(--cybe-font-body); font-size: 16px; font-weight: 600; color: var(--text); display: flex; align-items: center; justify-content: space-between; cursor: pointer; border-radius: var(--r); } .cybe-faq__icon { font-size: 22px; transition: transform var(--ease); color: var(--cybe-brand); flex-shrink: 0; } .cybe-faq__item.open .cybe-faq__icon { transform: rotate(45deg); } .cybe-faq__a { max-height: 0; overflow: hidden; padding: 0 24px; font-size: 15px; color: var(--sub); transition: max-height var(--ease), padding var(--ease); } .cybe-faq__item.open .cybe-faq__a { max-height: 400px; padding: 0 24px 20px; } /* ── CTA Banner ── */ .cybe-cta-banner { background: var(--cybe-brand); border-radius: 28px; padding: 72px 64px; text-align: center; position: relative; overflow: hidden; } .cybe-cta-banner::before { content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%; background: rgba(255,255,255,.06); top: -100px; right: -80px; } .cybe-cta-banner .cybe-title, .cybe-cta-banner .cybe-eyebrow { color: #fff; } .cybe-cta-banner .cybe-subtitle { color: rgba(255,255,255,.75); } .cybe-cta-banner__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 32px; } /* ── Newsletter ── */ .cybe-newsletter { display: flex; align-items: center; background: var(--surf); border-radius: var(--rpill); box-shadow: var(--neu-out); padding: 8px 8px 8px 24px; max-width: 520px; gap: 8px; } .cybe-newsletter input { flex: 1; border: 0; background: transparent; font-family: var(--cybe-font-body); font-size: 15px; color: var(--text); outline: none; } /* ── Contact ── */ .cybe-contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; } .cybe-form-field { margin-bottom: 18px; } .cybe-form-field label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 7px; } .cybe-form-field input, .cybe-form-field textarea { width: 100%; background: var(--bg); border: 0; border-radius: var(--rsm); box-shadow: var(--neu-in); padding: 14px 18px; font-family: var(--cybe-font-body); font-size: 15px; color: var(--text); transition: box-shadow var(--ease); outline: none; resize: vertical; } .cybe-form-field input:focus, .cybe-form-field textarea:focus { box-shadow: var(--neu-in), 0 0 0 2px var(--cybe-brand-dim); } .cybe-contact-info { display: flex; flex-direction: column; gap: 14px; } .cybe-contact-item { display: flex; align-items: center; gap: 14px; padding: 18px 22px; } .cybe-contact-item .cybe-neu-icon { width: 46px; height: 46px; color: var(--cybe-brand); font-size: 20px; } .cybe-contact-item a { color: var(--text); font-weight: 600; } .cybe-contact-item a:hover { color: var(--cybe-brand); } .cybe-map { border-radius: var(--r); overflow: hidden; box-shadow: var(--neu-out); height: 300px; margin-top: 14px; } .cybe-map iframe { width: 100%; height: 100%; border: 0; } /* ── Footer ── */ .cybe-footer { background: var(--cybe-bg-dark); color: rgba(255,255,255,.75); padding: 80px 0 32px; } [data-theme="dark"] .cybe-footer { background: #07070f; } .cybe-footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-bottom: 56px; } .cybe-footer__title { font-family: var(--cybe-font-body); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #fff; margin-bottom: 16px; } .cybe-footer__desc { font-size: 14px; color: rgba(255,255,255,.55); line-height: 1.7; } .cybe-footer a { color: rgba(255,255,255,.65); font-size: 14px; transition: color var(--ease); } .cybe-footer a:hover { color: var(--cybe-brand); } .cybe-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .cybe-footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: 13px; color: rgba(255,255,255,.45); } .cybe-social-icons { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; } .cybe-social-icons a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.07); color: rgba(255,255,255,.7); font-size: 15px; transition: background var(--ease), color var(--ease); } .cybe-social-icons a:hover { background: var(--cybe-brand); color: #fff; } /* ── Back to top ── */ .cybe-btt { position: fixed; bottom: 90px; right: 20px; width: 44px; height: 44px; border-radius: 50%; background: var(--surf); color: var(--cybe-brand); display: flex; align-items: center; justify-content: center; box-shadow: var(--neu-out); opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity var(--ease), transform var(--ease); z-index: 9990; font-size: 18px; } .cybe-btt.show { opacity: 1; pointer-events: auto; transform: translateY(0); } /* ── Skip link ── */ .cybe-skip { position: absolute; left: -9999px; top: 0; background: var(--cybe-brand); color: #fff; padding: 12px 20px; z-index: 99999; border-radius: 0 0 8px 0; } .cybe-skip:focus { left: 0; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); } :focus-visible { outline: 2px solid var(--cybe-brand); outline-offset: 3px; } /* ── Honeypot ── */ .cybe-honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; } /* ── Breadcrumbs ── */ .cybe-breadcrumbs ol { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 24px; font-size: 13px; color: var(--muted); } .cybe-breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 8px; } .cybe-breadcrumbs a:hover { color: var(--cybe-brand); } /* ── Single tour layout ── */ .cybe-tour-single-grid { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; } .cybe-booking-box { padding: 32px; position: sticky; top: 100px; } .cybe-booking-price { font-family: var(--cybe-font-heading); font-size: 36px; font-weight: 700; color: var(--cybe-brand); } .cybe-tour-section { margin-bottom: 32px; } .cybe-tour-section h3 { font-size: 20px; margin-bottom: 14px; } .cybe-tour-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .cybe-tour-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--sub); } .cybe-tour-list li::before { content: '✓'; color: var(--cybe-brand); font-weight: 700; flex-shrink: 0; margin-top: 1px; } .cybe-tour-list li.excl::before { content: '✗'; color: #ef4444; } /* ── Page hero (sub-pages) ── */ .cybe-page-hero { background: linear-gradient(135deg, var(--cybe-bg-dark) 0%, #0a0a2e 100%); padding: 80px 0; text-align: center; color: #fff; } [data-theme="light"] .cybe-page-hero { background: linear-gradient(135deg, #0d0d40 0%, #001080 100%); } .cybe-page-hero h1 { color: #fff; font-size: clamp(32px, 5vw, 52px); } .cybe-page-hero .cybe-eyebrow { color: rgba(255,255,255,.65); } /* ── Offers / deals badge ── */ .cybe-offer-badge { background: #ef4444; color: #fff; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 4px 10px; border-radius: var(--rpill); } /* ── Section bg variants ── */ .cybe-bg-alt { background: var(--surf); }