/* =================================================================== CYBE T&T — NEUMORPHIC DESIGN SYSTEM Light + dark neumorphism, premium shadow tokens, base components. =================================================================== */ :root { /* Brand */ --cybe-brand: #0000FF; --cybe-black: #000000; --cybe-white: #FFFFFF; --cybe-light-surface: #F5F5F5; --cybe-dark-surface: #111111; --cybe-gray-surface: #EAEAEA; /* Fonts (overridden by Customizer vars injected in ) */ --cybe-font-heading: 'Cormorant Garamond', 'Playfair Display', serif; --cybe-font-body: 'Inter', sans-serif; /* Neumorphic shadow tokens */ --neu-light-shadow: 12px 12px 24px rgba(0, 0, 0, .12), -12px -12px 24px rgba(255, 255, 255, .9); --neu-light-shadow-inset: inset 6px 6px 12px rgba(0, 0, 0, .1), inset -6px -6px 12px rgba(255, 255, 255, .8); --neu-light-shadow-sm: 6px 6px 12px rgba(0, 0, 0, .1), -6px -6px 12px rgba(255, 255, 255, .85); --neu-dark-shadow: 8px 8px 16px rgba(0, 0, 0, .6), -8px -8px 16px rgba(255, 255, 255, .04); --neu-dark-shadow-inset: inset 4px 4px 10px rgba(0, 0, 0, .55), inset -4px -4px 10px rgba(255, 255, 255, .03); --radius-sm: 12px; --radius-md: 20px; --radius-lg: 32px; --radius-pill: 999px; --container-max: 1320px; --transition-premium: 320ms cubic-bezier(.22, 1, .36, 1); } /* --------------------------------------------------------------- Base --------------------------------------------------------------- */ body { margin: 0; font-family: var(--cybe-font-body); background: var(--cybe-light-surface); color: var(--cybe-black); -webkit-font-smoothing: antialiased; line-height: 1.6; } body.cybe-dark-mode { background: var(--cybe-dark-surface); color: var(--cybe-white); } h1, h2, h3, h4, h5, h6 { font-family: var(--cybe-font-heading); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 .5em; } a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; display: block; } .cybe-container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 24px; } .cybe-section { padding: 96px 0; } .cybe-section--tight { padding: 56px 0; } .cybe-eyebrow { display: inline-block; font-family: var(--cybe-font-body); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--cybe-brand); font-weight: 600; margin-bottom: 12px; } .cybe-section-title { font-size: clamp(32px, 4vw, 48px); margin-bottom: 16px; } .cybe-section-subtitle { max-width: 620px; color: rgba(0, 0, 0, .6); font-size: 17px; } body.cybe-dark-mode .cybe-section-subtitle { color: rgba(255, 255, 255, .65); } /* --------------------------------------------------------------- Neumorphic surfaces --------------------------------------------------------------- */ .cybe-neu-card { background: var(--cybe-light-surface); border-radius: var(--radius-md); box-shadow: var(--neu-light-shadow); transition: transform var(--transition-premium), box-shadow var(--transition-premium); } .cybe-neu-card:hover { transform: translateY(-6px); } body.cybe-dark-mode .cybe-neu-card { background: var(--cybe-dark-surface); box-shadow: var(--neu-dark-shadow); } .cybe-neu-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--cybe-light-surface); box-shadow: var(--neu-light-shadow-sm); transition: box-shadow var(--transition-premium), transform var(--transition-premium); } .cybe-neu-icon:hover, .cybe-neu-icon:focus-visible { box-shadow: var(--neu-light-shadow-inset); transform: scale(.96); } body.cybe-dark-mode .cybe-neu-icon { background: var(--cybe-dark-surface); box-shadow: var(--neu-dark-shadow); } /* --------------------------------------------------------------- Buttons — neumorphic press effect --------------------------------------------------------------- */ .cybe-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 34px; border: 0; border-radius: var(--radius-pill); font-family: var(--cybe-font-body); font-weight: 600; font-size: 15px; letter-spacing: .02em; cursor: pointer; transition: transform var(--transition-premium), box-shadow var(--transition-premium), background var(--transition-premium), color var(--transition-premium); background: var(--cybe-brand); color: var(--cybe-white); box-shadow: var(--neu-light-shadow-sm); } .cybe-btn:hover { transform: translateY(-3px); } .cybe-btn:active { transform: translateY(0); box-shadow: var(--neu-light-shadow-inset); } .cybe-btn--ghost { background: transparent; color: var(--cybe-black); box-shadow: var(--neu-light-shadow-sm); } body.cybe-dark-mode .cybe-btn--ghost { color: var(--cybe-white); box-shadow: var(--neu-dark-shadow); } .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: var(--cybe-white); } /* --------------------------------------------------------------- Glassmorphism overlay (hero) --------------------------------------------------------------- */ .cybe-glass { background: rgba(255, 255, 255, .08); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, .15); border-radius: var(--radius-lg); } /* --------------------------------------------------------------- Rating stars --------------------------------------------------------------- */ .cybe-rating { display: inline-flex; gap: 2px; color: var(--cybe-brand); font-size: 16px; } .cybe-star--empty { color: rgba(0, 0, 0, .2); } body.cybe-dark-mode .cybe-star--empty { color: rgba(255, 255, 255, .25); }