/* TalkEVENT Visual Theme System Opt-in appearance layer only. Activate on a containing element: */ [data-te-visual-theme] { --te-font-ui: 'Sarabun', 'IBM Plex Sans', Arial, sans-serif; --te-atmosphere-bg: #f7f9f7; --te-atmosphere-grid: rgba(29, 63, 51, .045); --te-atmosphere-glow-a: rgba(40, 145, 99, .13); --te-atmosphere-glow-b: rgba(209, 224, 214, .32); --te-ink: #111a17; --te-ink-secondary: #41504b; --te-muted: #68756f; --te-accent: #176849; --te-accent-2: #429b75; --te-accent-soft: #e6f1eb; --te-surface: rgba(255, 255, 254, .88); --te-surface-raised: #ffffff; --te-surface-subtle: #f1f5f2; --te-border: rgba(29, 61, 49, .105); --te-border-strong: rgba(23, 104, 73, .32); --te-button-bg: #176849; --te-button-ink: #ffffff; --te-positive: #17754c; --te-shadow-1: 0 1px 2px rgba(18, 27, 23, .035), 0 10px 28px rgba(18, 27, 23, .045); --te-shadow-2: 0 2px 5px rgba(18, 27, 23, .04), 0 22px 55px rgba(18, 27, 23, .08); --te-shadow-focus: 0 0 0 3px rgba(23, 104, 73, .18); --te-grid-size: 52px; --te-radius-card: 18px; --te-radius-control: 11px; --te-motion: 180ms cubic-bezier(.2, .8, .2, 1); color: var(--te-ink); font-family: var(--te-font-ui); } [data-te-visual-theme="editorial"] { color-scheme: light; --te-atmosphere-bg: #f6f8f6; --te-atmosphere-grid: rgba(34, 60, 49, .042); --te-atmosphere-glow-a: rgba(42, 142, 97, .13); --te-atmosphere-glow-b: rgba(232, 240, 235, .8); --te-ink: #101815; --te-ink-secondary: #34433e; --te-muted: #66736e; --te-accent: #176849; --te-accent-2: #489b77; --te-accent-soft: #e4f1e9; --te-surface: rgba(255, 255, 254, .9); --te-surface-raised: #fff; --te-surface-subtle: #f0f4f1; --te-border: rgba(22, 46, 38, .1); --te-border-strong: rgba(23, 104, 73, .28); } [data-te-visual-theme="executive"] { color-scheme: dark; --te-atmosphere-bg: #0b1110; --te-atmosphere-grid: rgba(178, 198, 188, .052); --te-atmosphere-glow-a: rgba(29, 135, 90, .2); --te-atmosphere-glow-b: rgba(190, 153, 88, .12); --te-ink: #f4f4f0; --te-ink-secondary: #cad0ca; --te-muted: #9ea9a1; --te-accent: #4daf82; --te-accent-2: #c7a66b; --te-accent-soft: rgba(53, 123, 88, .22); --te-surface: rgba(17, 25, 22, .82); --te-surface-raised: #131d19; --te-surface-subtle: rgba(255, 255, 255, .045); --te-border: rgba(205, 215, 208, .12); --te-border-strong: rgba(199, 166, 107, .39); --te-button-bg: #266d4e; --te-button-ink: #ffffff; --te-positive: #70c99a; --te-shadow-1: 0 10px 28px rgba(0, 0, 0, .22); --te-shadow-2: 0 26px 70px rgba(0, 0, 0, .38), 0 1px 0 rgba(255, 255, 255, .04) inset; --te-shadow-focus: 0 0 0 3px rgba(199, 166, 107, .22); } [data-te-visual-theme="future"] { color-scheme: dark; --te-atmosphere-bg: #07111c; --te-atmosphere-grid: rgba(91, 160, 178, .075); --te-atmosphere-glow-a: rgba(25, 178, 146, .19); --te-atmosphere-glow-b: rgba(34, 101, 154, .2); --te-ink: #eff6f5; --te-ink-secondary: #bed1d2; --te-muted: #8ea5ab; --te-accent: #28c29b; --te-accent-2: #4aaacb; --te-accent-soft: rgba(40, 194, 155, .14); --te-surface: rgba(10, 23, 36, .84); --te-surface-raised: #0d1928; --te-surface-subtle: rgba(56, 124, 145, .1); --te-border: rgba(103, 169, 188, .18); --te-border-strong: rgba(40, 194, 155, .38); --te-button-bg: #187354; --te-button-ink: #ffffff; --te-positive: #2fcea3; --te-shadow-1: 0 12px 32px rgba(0, 4, 12, .26); --te-shadow-2: 0 28px 72px rgba(0, 4, 12, .43), 0 0 0 1px rgba(42, 186, 155, .06); --te-shadow-focus: 0 0 0 3px rgba(40, 194, 155, .22); } /* Layered atmosphere: quiet lighting, grid precision and a very soft noise grain. */ .te-theme-scope { position: relative; isolation: isolate; background-color: var(--te-atmosphere-bg); background-image: radial-gradient(circle at 18% 10%, var(--te-atmosphere-glow-a), transparent 37%), radial-gradient(circle at 90% 4%, var(--te-atmosphere-glow-b), transparent 31%), linear-gradient(var(--te-atmosphere-grid) 1px, transparent 1px), linear-gradient(90deg, var(--te-atmosphere-grid) 1px, transparent 1px), url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E"); background-size: auto, auto, var(--te-grid-size) var(--te-grid-size), var(--te-grid-size) var(--te-grid-size), 180px; } .te-theme-scope :is(button, a, input, select, textarea) { transition: border-color var(--te-motion), background-color var(--te-motion), color var(--te-motion), box-shadow var(--te-motion), transform var(--te-motion); } .te-theme-scope :is(button, a, input, select, textarea):focus-visible { outline: none; box-shadow: var(--te-shadow-focus); } /* Existing shell adapters. These change appearance only, never geometry or flow. */ .te-theme-scope :is(.beta-header, .beta-sidebar, .invite-topbar) { color: var(--te-ink); background: var(--te-surface); border-color: var(--te-border); backdrop-filter: blur(18px); } .te-theme-scope :is(.beta-main, .gateway, .gateway-panel, .event-stage) { color: var(--te-ink); background-color: transparent; } .te-theme-scope :is( .card, .panel, .stat-card, .metric, .overview-card, .event-card, .section-card, .current-card, .usage-card, .logic-item, .locked-card, .mode, .trust, .learn, .plan-gate, .gateway-panel, .ticket-card, .detail-card, .timeline-item, .update, .future-card, .soft-panel, .mh-event-card, .pp-progress-card, .dp-pass-card ) { color: var(--te-ink); background: var(--te-surface); border-color: var(--te-border); box-shadow: var(--te-shadow-1); } .te-theme-scope :is( .card, .panel, .stat-card, .overview-card, .event-card, .section-card, .ticket-card, .mh-event-card, .future-card ):hover { border-color: var(--te-border-strong); box-shadow: var(--te-shadow-2); transform: translateY(-1px); } .te-theme-scope :is(h1, h2, h3, .page-title, .org-welcome-name, .section-title, .pp-card-name) { color: var(--te-ink); } .te-theme-scope :is(p, .page-subtitle, .stat-sub, .event-card-date, .hint, .copy, .tc-description) { color: var(--te-muted); } .te-theme-scope :is(.page-eyebrow, .stat-label, .stage-tag, .eyebrow, .pp-card-brand) { color: var(--te-accent); } .te-theme-scope :is(.btn-primary, .btn-new, .submit, button.primary, .is-primary) { color: var(--te-button-ink); background: var(--te-button-bg); border-color: var(--te-button-bg); box-shadow: 0 8px 22px color-mix(in srgb, var(--te-button-bg) 26%, transparent); } .te-theme-scope :is(.btn-primary, .btn-new, .submit, button.primary, .is-primary):hover { filter: brightness(1.045); transform: translateY(-1px); } .te-theme-scope :is(.form-control, input, select, textarea) { color: var(--te-ink); background-color: var(--te-surface-subtle); border-color: var(--te-border); } .te-theme-scope :is(.form-control, input, select, textarea)::placeholder { color: var(--te-muted); } .te-theme-scope .ticket-card.is-selected { background: var(--te-surface-raised); border-color: var(--te-accent); box-shadow: 0 0 0 1px var(--te-accent), var(--te-shadow-1); } .te-theme-scope :is(.beta-nav-item.is-active, .state, .pill, .tc-badge) { color: var(--te-accent); background: var(--te-accent-soft); border-color: var(--te-border-strong); } .te-theme-scope .hub { background: transparent; color: var(--te-ink); } .te-theme-scope .pp-card { color: var(--te-ink); background: radial-gradient(circle at 84% 12%, var(--te-atmosphere-glow-a), transparent 39%), var(--te-surface-raised); border: 1px solid var(--te-border); box-shadow: var(--te-shadow-2); } /* Registration adapter: same journey and dimensions, upgraded material language. */ body.te-register-themed { color: var(--te-ink); background-color: #ffffff; background-image: radial-gradient(circle at 50% 0%, rgba(229, 240, 234, .13), transparent 27%), linear-gradient(180deg, #ffffff 0%, #ffffff 60%, #fdfefd 100%); background-size: auto; background-attachment: fixed; } .te-register-themed .invite-topbar { background: rgba(255, 255, 255, .86); border-color: var(--te-border); box-shadow: 0 1px 0 rgba(255, 255, 255, .68), 0 10px 34px rgba(17, 33, 27, .035); } .te-register-themed .invite-trust { color: var(--te-muted); } .te-register-themed .gateway-panel { background: transparent; border: 0; box-shadow: none; } .te-register-themed .event-stage { position: relative; isolation: isolate; overflow: hidden; padding: clamp(34px, 5vw, 54px) clamp(22px, 5vw, 46px); border: 1px solid rgba(23, 104, 73, .14); border-radius: 26px; background: radial-gradient(circle at 14% 4%, rgba(254, 255, 248, .82), transparent 34%), radial-gradient(circle at 94% 12%, rgba(63, 148, 104, .24), transparent 42%), linear-gradient(138deg, #f0f9f1 0%, #d9f0dd 34%, #c3e7cf 66%, #a8d5bc 100%); box-shadow: 0 2px 5px rgba(18, 35, 27, .04), 0 20px 52px rgba(23, 104, 73, .105); } .te-register-themed .event-stage::before, .te-register-themed .event-stage::after { content: ""; display: block; pointer-events: none; position: absolute; z-index: -1; border-radius: 50%; } .te-register-themed .event-stage::before { width: 118%; height: 42%; right: -38%; top: 11%; border: 1px solid rgba(255, 255, 255, .46); background: linear-gradient(116deg, rgba(255, 255, 255, .18), rgba(46, 125, 82, .065)); transform: rotate(-14deg); } .te-register-themed .event-stage::after { width: 94%; height: 34%; left: -26%; bottom: -15%; background: radial-gradient(circle, rgba(255, 255, 255, .37), transparent 69%); } .te-register-themed .event-stage > * { position: relative; z-index: 1; } .te-register-themed .hero h1, .te-register-themed .panel-title, .te-register-themed .section-label, .te-register-themed .meta-card strong, .te-register-themed .tc-name { color: var(--te-ink); } .te-register-themed :is(.hero p, .panel-sub, .meta-card span, .tc-desc, .tc-meta-item, .tc-benefit) { color: var(--te-muted); } .te-register-themed .eyebrow { color: var(--te-accent); background: rgba(255, 255, 255, .49); border: 1px solid rgba(23, 104, 73, .08); padding: 6px 14px; border-radius: 999px; } .te-register-themed .meta-grid, .te-register-themed .meta-card, .te-register-themed .divider { border-color: var(--te-border); } .te-register-themed .state { color: var(--te-ink-secondary); background: var(--te-surface-subtle); border: 1px solid var(--te-border); } .te-register-themed .state.ok { color: var(--te-accent); background: var(--te-accent-soft); border-color: var(--te-border-strong); } .te-register-themed .ticket-card { background: rgba(255, 255, 254, .73); border: 1px solid var(--te-border); box-shadow: var(--te-shadow-1); } .te-register-themed .ticket-card:hover:not(.is-unavailable) { background: var(--te-surface-raised); border-color: var(--te-border-strong); box-shadow: var(--te-shadow-2); } .te-register-themed .ticket-card.is-selected { background: var(--te-surface-raised); border-color: var(--te-accent); box-shadow: 0 0 0 1px var(--te-accent), 0 18px 45px rgba(21, 74, 52, .09); } .te-register-themed .tc-radio { accent-color: var(--te-accent); } .te-register-themed .tc-price-final { color: var(--te-ink); } .te-register-themed :is(.form-control, .promo-input) { background: rgba(255, 255, 254, .78); border-color: var(--te-border); box-shadow: 0 1px 2px rgba(14, 28, 23, .025); } .te-register-themed :is(.form-control, .promo-input):focus { border-color: var(--te-accent); box-shadow: var(--te-shadow-focus); } .te-register-themed .order-summary { background: var(--te-surface); border: 1px solid var(--te-border); box-shadow: var(--te-shadow-1); } .te-register-themed .submit, .te-register-themed .submit.is-paid { color: var(--te-button-ink); background: var(--te-button-bg); box-shadow: 0 12px 28px rgba(23, 104, 73, .2); } .te-register-themed .submit:hover:not(:disabled), .te-register-themed .submit.is-paid:hover:not(:disabled) { background: #125b40; transform: translateY(-1px); box-shadow: 0 15px 34px rgba(23, 104, 73, .25); } .te-register-themed .minor-link { color: var(--te-accent); } @media (max-width: 860px) { .te-register-themed .event-stage { padding: 30px 20px; border-radius: 21px; } } /* Member login adapter: dark green canvas (passport-card aesthetic) with white access panel. */ body.te-member-login { background: #0a2818; color: #fff; } .te-member-login .access-lang-switch { position: fixed; top: 25px; right: clamp(20px, 4vw, 48px); z-index: 30; } .te-member-login .access-gateway { color: #fff; background: transparent; } .te-member-login .access-gateway::before { background: linear-gradient(135deg, #0a2818 0%, #145c39 55%, #1e7a4e 100%); } .te-member-login .access-gateway::after { background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.06), transparent 40%), radial-gradient(circle at 78% 68%, rgba(46,125,82,.18), transparent 36%); background-image: radial-gradient(circle, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 24px 24px; } .te-member-login .access-world .brand-logo { filter: brightness(0) invert(1); } .te-member-login .panel-inner .brand-logo { filter: none; } .te-member-login :is(.happening-word, .world-copy p) { color: #fff; text-shadow: 0 8px 28px rgba(0,0,0,.28); } .te-member-login .world-copy p { color: rgba(255,255,255,.7); font-weight: 500; max-width: 520px; text-shadow: none; } .te-member-login .eyebrow { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.1); color: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.16); backdrop-filter: blur(12px); } .te-member-login .happening-orb { background: radial-gradient(circle at 31% 25%, rgba(255, 255, 255, .72), transparent 17%), radial-gradient(circle at 64% 72%, #147044, #4ca574 62%, #c7e5d2); box-shadow: inset -8px -9px 18px rgba(12, 67, 42, .16), 0 12px 24px rgba(23, 104, 73, .32); } .te-member-login .happening-orb::before, .te-member-login .happening-orb::after { } .te-member-login .floating-chip { border: none; color: #fff; background: linear-gradient(135deg, #2e7d52, #68ad8c); box-shadow: 0 16px 28px rgba(10,40,24,.32); } .te-member-login .panel-inner { position: relative; isolation: isolate; overflow: hidden; color: var(--te-ink); border: 1px solid rgba(23, 104, 73, .14); background: radial-gradient(circle at 12% 2%, rgba(255, 255, 249, .84), transparent 29%), radial-gradient(circle at 93% 12%, rgba(60, 150, 103, .22), transparent 43%), linear-gradient(140deg, #f1f9f2 0%, #daf0de 36%, #c4e7d0 68%, #a9d7bc 100%); box-shadow: 0 2px 5px rgba(18, 35, 27, .04), 0 25px 66px rgba(23, 104, 73, .13); backdrop-filter: none; } .te-member-login .panel-inner::before { content: ""; pointer-events: none; position: absolute; z-index: -1; width: 116%; height: 31%; right: -48%; top: 12%; border: 1px solid rgba(255, 255, 255, .48); border-radius: 50%; background: linear-gradient(110deg, rgba(255, 255, 255, .15), rgba(46, 125, 82, .05)); transform: rotate(-13deg); } .te-member-login .panel-kicker { color: var(--te-accent); background: rgba(255, 255, 255, .5); border-color: rgba(23, 104, 73, .1); box-shadow: none; } .te-member-login :is(.panel-title, .panel-copy, .invite-state, .form-label, .login-options, .signup-footnote) { color: var(--te-ink-secondary); } .te-member-login .panel-title { color: var(--te-ink); text-transform: none; letter-spacing: -.01em; font: 600 23px/1.3 'Sarabun', 'IBM Plex Sans', sans-serif; margin-top: 22px; } .te-member-login .panel-copy { font-weight: 400; } .te-member-login .invite-state { background: rgba(255, 255, 255, .47); border-color: rgba(23, 104, 73, .1); font-weight: 500; } .te-member-login .tabs { background: rgba(255, 255, 255, .42); border: 1px solid rgba(23, 104, 73, .08); } .te-member-login .tab-btn { color: var(--te-ink-secondary); font: 600 14px/1 'Sarabun', 'IBM Plex Sans', sans-serif; letter-spacing: 0; } .te-member-login .tab-btn.is-active { color: #fff; background: var(--te-accent); box-shadow: 0 9px 20px rgba(23, 104, 73, .18); } .te-member-login :is(.form-control, .country-select) { color: var(--te-ink); background: rgba(255, 255, 255, .78); border-color: rgba(23, 104, 73, .12); box-shadow: 0 1px 2px rgba(18, 35, 27, .025); } .te-member-login :is(.form-control, .country-select):focus { border-color: var(--te-accent); box-shadow: var(--te-shadow-focus); } .te-member-login .input-icon { color: var(--te-accent); } .te-member-login .submit { background: var(--te-button-bg); color: #fff; text-transform: none; letter-spacing: 0; font: 600 16px/1.2 'Sarabun', 'IBM Plex Sans', sans-serif; box-shadow: 0 14px 28px rgba(23, 104, 73, .2); } .te-member-login .submit:hover:not(:disabled) { background: #125b40; transform: translateY(-1px); } .te-member-login .forgot-btn, .te-member-login .signup-footnote button, .te-member-login .back-link { color: var(--te-accent); font-family: 'Sarabun', 'IBM Plex Sans', sans-serif; letter-spacing: 0; } .te-member-login .divider { color: var(--te-muted); } .te-member-login .divider::before, .te-member-login .divider::after { background: rgba(23, 104, 73, .12); } .te-member-login .social-icon { border-color: rgba(23, 104, 73, .12); box-shadow: 0 8px 24px rgba(23, 104, 73, .08); } .te-member-login .social-btn { color: var(--te-ink-secondary); font-weight: 600; } @media (max-width: 960px) { .te-member-login .access-lang-switch { top: 19px; right: 18px; } .te-member-login .access-gateway { padding-top: 62px; } } /* Organizer public profile adapter: clean exterior with a premium green identity card. */ body.te-organizer-profile-themed { --brand: #176849; --brand-mid: #255f48; --brand-light: #e7f3ec; --gray-mid: #66766f; --gray-dark: #3f4f48; --gray-line: #dde6e1; background-color: #ffffff; background-image: radial-gradient(circle at 52% 0%, rgba(222, 239, 229, .18), transparent 30%), linear-gradient(180deg, #ffffff 0%, #ffffff 58%, #fbfdfc 100%); color: var(--te-ink); } .te-organizer-profile-themed .topbar { height: 58px; padding: 0 clamp(18px, 3vw, 32px); border-bottom-color: rgba(25, 48, 40, .09); background: rgba(255, 255, 255, .92); box-shadow: 0 1px 3px rgba(21, 42, 34, .03); backdrop-filter: blur(12px); } .te-organizer-profile-themed .topbar-logo img { height: 28px; } .te-organizer-profile-themed .topbar-back, .te-organizer-profile-themed .topbar-user { color: var(--te-ink-secondary); font-weight: 600; } .te-organizer-profile-themed .topbar-back:hover { color: var(--te-accent); } .te-organizer-profile-themed .demo-bar { padding: 10px clamp(18px, 3vw, 32px); background: #f5faf7; border-bottom: 1px solid rgba(23, 104, 73, .08); color: var(--te-muted); letter-spacing: .02em; } .te-organizer-profile-themed .demo-bar strong { color: var(--te-accent); } .te-organizer-profile-themed .demo-btn { border-color: rgba(23, 104, 73, .15); background: rgba(255, 255, 255, .7); color: var(--te-ink-secondary); } .te-organizer-profile-themed .demo-btn.is-active { border-color: var(--te-accent); background: var(--te-accent); color: #fff; box-shadow: 0 6px 15px rgba(23, 104, 73, .14); } .te-organizer-profile-themed .demo-btn:hover:not(.is-active) { border-color: rgba(23, 104, 73, .32); color: var(--te-accent); } .te-organizer-profile-themed .org-cover { width: min(calc(100% - 48px), 1100px); margin: 26px auto 22px; padding: clamp(34px, 5vw, 48px) 0 clamp(30px, 5vw, 42px); border: 1px solid rgba(23, 104, 73, .14); border-radius: 27px; background: radial-gradient(circle at 12% 0%, rgba(255, 255, 251, .9), transparent 36%), radial-gradient(circle at 93% 4%, rgba(69, 151, 106, .25), transparent 40%), linear-gradient(138deg, #eff8f1 0%, #dcefe0 33%, #c9e9d2 67%, #abd8bf 100%); box-shadow: 0 2px 5px rgba(23, 104, 73, .035), 0 22px 50px rgba(23, 104, 73, .09); } .te-organizer-profile-themed .org-cover::before { background: radial-gradient(ellipse 60% 55% at 18% 12%, rgba(255, 255, 255, .52), transparent 65%), radial-gradient(ellipse 55% 70% at 90% 16%, rgba(39, 119, 77, .13), transparent 66%); } .te-organizer-profile-themed .org-cover-grid { padding: 0 clamp(22px, 5vw, 46px); } .te-organizer-profile-themed .org-avatar { background: rgba(255, 255, 255, .64); border-color: rgba(23, 104, 73, .16); color: var(--te-accent); box-shadow: 0 9px 22px rgba(23, 104, 73, .08); } .te-organizer-profile-themed .org-avatar-wrap:hover .org-avatar { border-color: rgba(23, 104, 73, .35); } .te-organizer-profile-themed .org-name, .te-organizer-profile-themed .org-tagline, .te-organizer-profile-themed .org-stat-n { color: var(--te-ink); } .te-organizer-profile-themed .org-name { letter-spacing: -.025em; } .te-organizer-profile-themed :is(.org-type, .org-desc, .org-stat-l) { color: var(--te-ink-secondary); } .te-organizer-profile-themed .org-desc { max-width: 640px; font-size: 14px; } .te-organizer-profile-themed .org-verified { border-color: rgba(23, 104, 73, .14); background: rgba(255, 255, 255, .62); color: var(--te-accent); } .te-organizer-profile-themed .org-verified svg circle { fill: var(--te-accent); } .te-organizer-profile-themed .org-tag { border-color: rgba(23, 104, 73, .1); background: rgba(255, 255, 255, .54); color: var(--te-ink-secondary); } .te-organizer-profile-themed .org-link { color: var(--te-ink-secondary); font-weight: 600; } .te-organizer-profile-themed .org-link:hover { color: var(--te-accent); } .te-organizer-profile-themed .org-links span.org-link { color: rgba(25, 48, 40, .2) !important; } .te-organizer-profile-themed .org-stats-inline { gap: clamp(18px, 4vw, 30px); padding-top: 3px; } .te-organizer-profile-themed .feat-badge { border-color: rgba(168, 119, 23, .18); background: rgba(255, 250, 233, .68); color: #906718; } .te-organizer-profile-themed .btn-follow { border-color: var(--te-accent); background: var(--te-accent); color: #fff; box-shadow: 0 8px 18px rgba(23, 104, 73, .16); } .te-organizer-profile-themed .btn-follow:hover, .te-organizer-profile-themed .btn-follow.is-following { border-color: var(--brand-mid); background: var(--brand-mid); } .te-organizer-profile-themed .btn-contact { border: 1px solid rgba(23, 104, 73, .16); background: rgba(255, 255, 255, .66); color: var(--te-accent); } .te-organizer-profile-themed .btn-contact:hover { background: #fff; } .te-organizer-profile-themed .org-cover-edit-btn { border-color: rgba(23, 104, 73, .13); background: rgba(255, 255, 255, .6); color: var(--te-ink-secondary); } .te-organizer-profile-themed .org-cover-edit-btn:hover { background: #fff; color: var(--te-accent); } .te-organizer-profile-themed .org-tabs-wrap { top: 58px; border-bottom-color: rgba(25, 48, 40, .08); background: rgba(255, 255, 255, .9); box-shadow: 0 4px 18px rgba(25, 48, 40, .035); backdrop-filter: blur(12px); } .te-organizer-profile-themed .org-tab { color: var(--te-muted); font-weight: 700; } .te-organizer-profile-themed .org-tab.is-active { color: var(--te-accent); border-bottom-color: var(--te-accent); } .te-organizer-profile-themed .org-tab.is-active .tab-count { color: var(--te-accent); background: var(--te-accent-soft); } .te-organizer-profile-themed .org-body { padding-top: 32px; } .te-organizer-profile-themed .section-title { color: var(--te-ink); letter-spacing: -.01em; } .te-organizer-profile-themed :is(.event-card, .video-card, .article-card, .download-item, .cmp-card, .gate-modal, .cmp-modal) { border-color: rgba(25, 48, 40, .095); border-radius: 16px; background: rgba(255, 255, 255, .96); box-shadow: 0 2px 6px rgba(21, 42, 34, .025), 0 13px 32px rgba(21, 42, 34, .045); } .te-organizer-profile-themed :is(.event-card, .video-card, .article-card, .download-item):hover { box-shadow: 0 4px 10px rgba(21, 42, 34, .04), 0 20px 42px rgba(23, 104, 73, .09); } .te-organizer-profile-themed :is(.event-card-title, .video-title, .article-title, .dl-title, .gate-title) { color: var(--te-ink); } .te-organizer-profile-themed :is(.event-card-sub, .event-card-loc, .video-views, .article-excerpt, .article-read-time, .article-date, .dl-desc, .dl-size, .dl-count, .gate-body) { color: var(--te-ink-secondary); } .te-organizer-profile-themed :is(.event-reg-fill, .btn-register, .btn-dl-free, .cmp-submit) { background: var(--te-accent); } .te-organizer-profile-themed :is(.btn-register, .btn-dl-free, .cmp-submit):hover { background: var(--brand-mid); } .te-organizer-profile-themed .btn-notify { border-color: rgba(23, 104, 73, .3); color: var(--te-accent); } .te-organizer-profile-themed .btn-notify:hover { background: var(--te-accent-soft); } .te-organizer-profile-themed :is(.cmp-placeholder, .cmp-modal-close, .btn-soon) { background: #f5f9f7; } .te-organizer-profile-themed :is(.cmp-input, .cmp-textarea, .cmp-select):focus { border-color: var(--te-accent); box-shadow: 0 0 0 3px rgba(23, 104, 73, .1); } @media (max-width: 600px) { .te-organizer-profile-themed .topbar { padding: 0 14px; } .te-organizer-profile-themed .demo-bar { padding: 10px 14px; overflow-x: auto; white-space: nowrap; } .te-organizer-profile-themed .org-cover { width: calc(100% - 24px); margin: 16px auto 14px; border-radius: 22px; } } /* Visual exploration kit: one component structure rendered through three token sets. */ .te-system-page { min-height: 100vh; padding: clamp(26px, 4vw, 54px); background: #eef1ee; color: #111914; font-family: 'Sarabun', 'IBM Plex Sans', Arial, sans-serif; } .te-system-head { max-width: 1420px; margin: 0 auto 34px; display: flex; align-items: end; justify-content: space-between; gap: 28px; } .te-system-brand img { width: 124px; margin-bottom: 26px; } .te-system-kicker { color: #176849; font: 700 11px/1 'IBM Plex Sans', sans-serif; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 13px; } .te-system-head h1 { max-width: 670px; font: 600 clamp(30px, 3.5vw, 46px)/1.12 'IBM Plex Sans', 'Sarabun', sans-serif; letter-spacing: -.05em; } .te-system-head p { max-width: 410px; color: #57645e; font-size: 15px; line-height: 1.7; } .te-variants { max-width: 1420px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(280px, 1fr)); gap: clamp(16px, 2vw, 25px); } .te-variant { min-height: 744px; border-radius: 30px; border: 1px solid var(--te-border); padding: 20px; overflow: hidden; box-shadow: var(--te-shadow-2); } .te-variant-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .te-variant-label { color: var(--te-accent); font: 700 10px/1 'IBM Plex Sans', sans-serif; letter-spacing: .17em; text-transform: uppercase; } .te-variant-mode { color: var(--te-muted); padding: 5px 9px; font: 600 10px/1 'IBM Plex Sans', sans-serif; border: 1px solid var(--te-border); border-radius: 20px; } .te-preview-pass { position: relative; padding: 23px; min-height: 206px; color: var(--te-ink); background: linear-gradient(125deg, color-mix(in srgb, var(--te-accent) 20%, var(--te-surface-raised)), var(--te-surface-raised) 55%), var(--te-surface-raised); border: 1px solid var(--te-border-strong); border-radius: var(--te-radius-card); box-shadow: var(--te-shadow-1); overflow: hidden; } .te-preview-pass::after { content: ""; position: absolute; width: 190px; height: 190px; right: -70px; bottom: -110px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--te-accent-2) 32%, transparent); box-shadow: 0 0 46px var(--te-atmosphere-glow-a); } .te-preview-pass-kicker { color: var(--te-accent); font: 700 10px/1 'IBM Plex Sans', sans-serif; letter-spacing: .17em; text-transform: uppercase; } .te-preview-pass h2 { position: relative; margin-top: 29px; max-width: 300px; color: var(--te-ink); font: 600 24px/1.19 'IBM Plex Sans', 'Sarabun', sans-serif; letter-spacing: -.035em; } .te-preview-meta { position: relative; margin-top: 19px; display: flex; gap: 10px; color: var(--te-muted); font-size: 12px; } .te-preview-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 13px; } .te-preview-stat { padding: 12px 11px; background: var(--te-surface); border: 1px solid var(--te-border); border-radius: 12px; } .te-preview-stat strong { display: block; color: var(--te-ink); font: 600 18px/1.15 'IBM Plex Sans', sans-serif; } .te-preview-stat span { display: block; margin-top: 4px; color: var(--te-muted); font-size: 10px; } .te-preview-actions { display: grid; grid-template-columns: 1.6fr 1fr; gap: 9px; margin-top: 13px; } .te-preview-action { padding: 13px; border: 1px solid var(--te-border); border-radius: var(--te-radius-control); background: var(--te-surface); color: var(--te-ink-secondary); font-weight: 600; font-size: 13px; text-align: center; } .te-preview-action.is-primary { color: var(--te-button-ink); background: var(--te-button-bg); border-color: var(--te-button-bg); } .te-preview-module { margin-top: 13px; padding: 17px; color: var(--te-ink); background: var(--te-surface); border: 1px solid var(--te-border); border-radius: 15px; box-shadow: var(--te-shadow-1); } .te-preview-module-head { display: flex; justify-content: space-between; align-items: center; color: var(--te-ink-secondary); font-size: 13px; font-weight: 600; margin-bottom: 14px; } .te-preview-signal { display: flex; align-items: center; gap: 9px; color: var(--te-muted); font-size: 12px; padding: 8px 0; } .te-preview-signal + .te-preview-signal { border-top: 1px solid var(--te-border); } .te-preview-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--te-accent); box-shadow: 0 0 9px var(--te-atmosphere-glow-a); } .te-preview-nav { display: flex; justify-content: space-around; padding: 15px 4px 2px; color: var(--te-muted); font-size: 11px; } .te-preview-nav .is-active { color: var(--te-accent); font-weight: 700; } .te-theme-note { max-width: 1420px; margin: 32px auto 0; padding: 22px 26px; border: 1px solid rgba(25, 48, 40, .1); border-radius: 17px; background: rgba(255, 255, 255, .68); color: #52615b; font-size: 14px; } .te-theme-note strong { color: #14201b; } @media (hover: hover) { .te-preview-action:hover, .te-preview-module:hover, .te-preview-pass:hover { transform: translateY(-2px); border-color: var(--te-border-strong); box-shadow: var(--te-shadow-2); } } @media (max-width: 1080px) { .te-system-head { display: block; } .te-system-head p { margin-top: 18px; } .te-variants { grid-template-columns: 1fr; max-width: 470px; } .te-variant { min-height: auto; } } @media (prefers-reduced-motion: reduce) { .te-theme-scope *, .te-theme-scope *::before, .te-theme-scope *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }