API tools faq
paste
swest

style-v4.1.css

swest
Mar 3rd, 2025 (edited)
468
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 18.23 KB | None | 0 0
raw download clone embed print report
  1. /*
  2. Theme Name:     DPL
  3. Theme URI:      n/a
  4. Template:       kadence
  5. Author:         Steve West
  6. Author URI:     n/a
  7. Description:    child theme for Kadence
  8. Version:        4.1
  9. License:        GNU General Public License v3.0 (or later)
  10. License URI:    https://www.gnu.org/licenses/gpl-3.0.html
  11. */
  12.  
  13. /* Main Container */
  14. .speaking-events-container {
  15.     max-width: 1200px;
  16.     margin: 0 auto;
  17.     padding: 2rem 1rem;
  18.     /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; */
  19. }
  20.  
  21. /* Header Section */
  22. .speaking-events-header {
  23.     text-align: center;
  24.     margin-bottom: 3rem;
  25.     padding-bottom: 0;
  26.     border-bottom: none;
  27. }
  28.  
  29. .speaking-events-title {
  30.     font-size: 2.75rem;
  31.     font-weight: 800;
  32.     color: #222;
  33.     margin-bottom: 1rem;
  34.     line-height: 1.2;
  35.     letter-spacing: -0.02em;
  36. }
  37.  
  38. .speaking-events-description {
  39.     font-size: 1.15rem;
  40.     color: #555;
  41.     margin-bottom: 0;
  42.     max-width: 700px;
  43.     margin-left: auto;
  44.     margin-right: auto;
  45.     line-height: 1.6;
  46. }
  47.  
  48. /* Filters */
  49. .speaking-events-filters {
  50.     margin-bottom: 1rem;
  51. }
  52.  
  53. .filters-form {
  54.     width: 100%;
  55. }
  56.  
  57. .filter-row {
  58.     display: flex;
  59.     flex-wrap: wrap;
  60.     justify-content: space-between;
  61.     gap: 1.5rem;
  62. }
  63.  
  64. .filter-group {
  65.     flex: 1;
  66.     min-width: 250px;
  67. }
  68.  
  69. .date-filter-group {
  70.     flex: 0 0 auto;
  71.     width: 300px;
  72. }
  73.  
  74. .filter-group label {
  75.     display: block;
  76.     margin-bottom: 0.5rem;
  77.     font-weight: 500;
  78.     font-size: 0.9rem;
  79.     color: #333;
  80. }
  81.  
  82. .search-input-wrapper {
  83.     position: relative !important;
  84.     width: 100% !important;
  85. }
  86.  
  87. #search-suggestions {
  88.     position: absolute !important;
  89.     z-index: 1000 !important;
  90.     width: 100% !important;
  91.     background-color: white !important;
  92.     border: 1px solid #e0e5eb !important;
  93.     border-radius: 0 0 8px 8px !important;
  94.     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1) !important;
  95.     border-top: none !important;
  96.     max-height: 300px !important;
  97.     overflow-y: auto !important;
  98.     margin-top: -1px !important;
  99. }
  100.  
  101. .search-suggestion-item,
  102. .link-style-no-underline .entry-content .search-suggestion-item {
  103.     padding: 12px 16px !important;
  104.     cursor: pointer !important;
  105.     transition: all 0.2s ease !important;
  106.     display: flex !important;
  107.     align-items: center !important;
  108.     border-bottom: 1px solid #f0f4fa !important;
  109.     text-decoration: none !important;
  110. }
  111.  
  112. .search-suggestion-item:last-child,
  113. .link-style-no-underline .entry-content .search-suggestion-item:last-child {
  114.     border-bottom: none !important;
  115. }
  116.  
  117. .search-suggestion-item:hover,
  118. .link-style-no-underline .entry-content .search-suggestion-item:hover {
  119.     background-color: #f9fafc !important;
  120.     text-decoration: none !important;
  121. }
  122.  
  123. .search-suggestion-type,
  124. .link-style-no-underline .entry-content .search-suggestion-type {
  125.     display: inline-block !important;
  126.     padding: 3px 8px !important;
  127.     border-radius: 4px !important;
  128.     background-color: rgba(var(--global-palette1-rgb, 0, 115, 170), 0.1) !important;
  129.     color: var(--global-palette1, #0073aa) !important;
  130.     font-size: 0.75rem !important;
  131.     font-weight: 600 !important;
  132.     margin-right: 10px !important;
  133.     flex-shrink: 0 !important;
  134.     text-decoration: none !important;
  135. }
  136.  
  137. .search-suggestion-title,
  138. .link-style-no-underline .entry-content .search-suggestion-title {
  139.     font-size: 0.95rem !important;
  140.     color: #333 !important;
  141.     font-weight: 500 !important;
  142.     flex-grow: 1 !important;
  143.     text-decoration: none !important;
  144.     white-space: nowrap !important;
  145.     overflow: hidden !important;
  146.     text-overflow: ellipsis !important;
  147. }
  148.  
  149. .filter-group input {
  150.     width: 100%;
  151.     padding: 0.75rem 2.5rem 0.75rem 1rem;
  152.     border: 1px solid #e0e0e0;
  153.     border-radius: 4px;
  154.     font-size: 1rem;
  155.     color: #333;
  156. }
  157.  
  158. .filter-group select {
  159.     width: 100%;
  160.     padding: 0.75rem 1rem;
  161.     border: 1px solid #e0e0e0;
  162.     border-radius: 4px;
  163.     font-size: 1rem;
  164.     color: #333;
  165.     background-color: white;
  166.     -webkit-appearance: none;
  167.     -moz-appearance: none;
  168.     appearance: none;
  169.     background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  170.     background-repeat: no-repeat;
  171.     background-position: right 1rem center;
  172.     background-size: 1em;
  173. }
  174.  
  175. .search-button {
  176.     position: absolute;
  177.     right: 10px;
  178.     top: 50%;
  179.     transform: translateY(-50%);
  180.     background: none;
  181.     border: none;
  182.     padding: 0;
  183.     cursor: pointer;
  184.     color: #888;
  185. }
  186.  
  187. .search-button:hover {
  188.     color: #333;
  189. }
  190.  
  191. .filter-divider {
  192.     margin: 1.5rem 0;
  193.     border: none;
  194.     border-top: 1px solid #e0e0e0;
  195. }
  196.  
  197. /* Filter Status */
  198. .filter-status {
  199.     display: flex;
  200.     justify-content: space-between;
  201.     align-items: center;
  202. /*    margin: 1.5rem 0 2.5rem;*/
  203.     padding: 1rem 1.5rem;
  204.     background-color: #f0f7fc;
  205.     border-radius: 8px;
  206.     border-left: 4px solid var(--global-palette1);
  207. }
  208.  
  209. #filter-status-text {
  210.     font-style: normal;
  211.     color: #444;
  212.     font-weight: 500;
  213.     font-size: 0.95rem;
  214. }
  215.  
  216. .speaking-events-container  .reset-filters-button {
  217.     border: none;
  218.     background-color: #e6eef5;
  219.     color: var(--global-palette1);
  220.     padding: 0.5rem 1.25rem;
  221.     border-radius: 6px;
  222.     cursor: pointer;
  223.     font-size: 0.85rem;
  224.     font-weight: 600;
  225.     transition: all 0.2s;
  226. }
  227.  
  228. .reset-filters-button:hover {
  229.     background-color: var(--global-palette1);
  230.     color: white;
  231. }
  232.  
  233. /* Grid Layout for Events */
  234. .dpl-page-speaking-events .speaking-events-grid {
  235.     display: flex !important;
  236.     flex-direction: column !important;
  237.     gap: 0 !important;
  238.     margin-top: 2rem !important;
  239.     width: 100% !important;
  240.     margin-left: 0 !important;
  241. }
  242.  
  243. .dpl-page-speaking-events .event-grid-item {
  244.     display: flex !important;
  245.     flex-direction: column !important;
  246.     background-color: transparent !important;
  247.     border-radius: 0 !important;
  248.     overflow: visible !important;
  249.     box-shadow: none !important;
  250.     transition: none !important;
  251.     height: auto !important;
  252.     width: 100% !important;
  253.     max-width: 100% !important;
  254.     margin: 0 !important;
  255.     text-align: left !important;
  256. /*    padding: 1.5rem 0 !important;*/
  257. }
  258.  
  259. .dpl-page-speaking-events .event-grid-item:hover {
  260.     transform: none !important;
  261.     box-shadow: none !important;
  262. }
  263.  
  264. .dpl-page-speaking-events .event-grid-header {
  265.     padding: 1.5rem 1.5rem 0 !important;
  266.     text-align: left !important;
  267. }
  268.  
  269. .dpl-page-speaking-events .event-grid-content {
  270.     padding: 1.5rem !important;
  271.     display: flex !important;
  272.     flex-direction: column !important;
  273.     flex-grow: 1 !important;
  274.     text-align: left !important;
  275. }
  276.  
  277. .dpl-page-speaking-events .event-grid-footer {
  278.     padding: 0 1.5rem 1.5rem !important;
  279.     text-align: left !important;
  280. }
  281.  
  282. /* Speaker Topic Wrapper */
  283. .dpl-page-speaking-events .speaker-topic-wrapper {
  284.     display: flex !important;
  285.     gap: 2rem !important;
  286.     margin: 0 !important;
  287.     align-items: flex-start !important;
  288.     text-align: left !important;
  289. }
  290.  
  291. .dpl-page-speaking-events .speaker-image-container {
  292.     flex: 0 0 150px !important;
  293.     text-align: center !important;
  294.     margin-bottom: 0 !important;
  295. }
  296.  
  297. .dpl-page-speaking-events .speaker-image {
  298.     aspect-ratio: 1 !important;
  299.     width: 150px !important;
  300.     height: 150px !important;
  301.     object-fit: cover !important;
  302.     border-radius: 50% !important;
  303.     border: 5px solid var(--global-palette1) !important;
  304.     margin-bottom: 0.75rem !important;
  305. }
  306.  
  307. .dpl-page-speaking-events .speaker-name {
  308.     display: block !important;
  309.     color: var(--global-palette1) !important;
  310.     font-size: 1.1rem !important;
  311.     font-weight: 500 !important;
  312. /*    text-decoration: none !important;*/
  313.     text-align: center !important;
  314. }
  315.  
  316. .dpl-page-speaking-events .speaker-name:hover {
  317.     text-decoration: underline !important;
  318. }
  319.  
  320. .dpl-page-speaking-events .topic-details {
  321.     flex: 1 !important;
  322.     min-width: 0 !important; /* Ensures text truncation works */
  323.     text-align: left !important;
  324. }
  325.  
  326. .dpl-page-speaking-events .topic-title {
  327.     margin-top: 0 !important;
  328.     margin-bottom: 0.75rem !important;
  329.     font-size: 1.5rem !important;
  330.     font-weight: 600 !important;
  331.     line-height: 1.3 !important;
  332. }
  333.  
  334. .dpl-page-speaking-events .speaker-topic-wrapper a {
  335.     text-decoration: underline;
  336.     color: var(--global-palette1) !important;
  337.     transition: all 0.1s linear;
  338. }
  339. .dpl-page-speaking-events .speaker-topic-wrapper a:hover {
  340.     text-decoration: underline;
  341.     text-decoration-color: currentcolor;
  342.     box-shadow: inset 0 -40px 0 0 var(--global-palette1);
  343.     color: var(--global-palette9) !important;
  344. }
  345.  
  346. .dpl-page-speaking-events .topic-title a {
  347.     /* color: var(--global-palette1); */
  348.     color: var(--global-palette1);
  349.     text-decoration: none;
  350. }
  351.  
  352. .dpl-page-speaking-events .topic-title a:hover {
  353.     text-decoration: underline;
  354. }
  355.  
  356. .dpl-page-speaking-events .event-info {
  357.     margin-bottom: 1rem !important;
  358.     font-size: 0.95rem !important;
  359.     color: #666 !important;
  360. }
  361.  
  362. .dpl-page-speaking-events .event-date-info {
  363.     display: flex !important;
  364.     align-items: center !important;
  365.     flex-wrap: wrap !important;
  366.     margin-bottom: 1rem !important;
  367.     font-size: 0.95rem !important;
  368.     color: #666 !important;
  369.     width: 100% !important;
  370. }
  371.  
  372. .topic-date-time {
  373.     display: inline-flex !important;
  374.     align-items: center !important;
  375.     color: #666 !important;
  376.     padding: 0 !important;
  377.     border-radius: 0 !important;
  378.     font-weight: normal !important;
  379.     font-size: 0.95rem !important;
  380.     margin-bottom: 0 !important;
  381.     background-color: transparent !important;
  382.     visibility: visible !important;
  383.     opacity: 1 !important;
  384. }
  385.  
  386. .dpl-page-speaking-events .separator {
  387.     margin: 0 0.5rem !important;
  388.     color: #999 !important;
  389.     font-weight: normal !important;
  390. }
  391.  
  392. .dpl-page-speaking-events .event-name {
  393.     color: var(--global-palette1) !important;
  394. /*    text-decoration: none !important;*/
  395.     font-weight: 500 !important;
  396. }
  397.  
  398. .dpl-page-speaking-events .event-name:hover {
  399.     text-decoration: underline !important;
  400. }
  401.  
  402. .dpl-page-speaking-events .topic-description {
  403.     /* color: #333; */
  404.     color: var(--global-palette4) !important;
  405.     line-height: 1.5 !important;
  406.     margin-bottom: 1rem !important;
  407. }
  408.  
  409. .truncate3 {
  410.     display: -webkit-box;
  411.     -webkit-line-clamp: 3;
  412.     -webkit-box-orient: vertical;
  413.     overflow: hidden;
  414. }
  415.  
  416. /* Read More Link - Ensure these styles aren't overridden */
  417. .dpl-page-speaking-events .read-more-link {
  418.     text-align: right !important;
  419.     margin-right: 0 !important;
  420.     margin-top: 1rem !important;
  421. }
  422.  
  423. .dpl-page-speaking-events .read-more-link a,
  424. .dpl-page-speaking-events .event-grid-content .read-more-link a,
  425. .dpl-page-speaking-events .speaking-events-grid .read-more-link a,
  426. .dpl-page-speaking-events.link-style-no-underline .entry-content .event-grid-content .read-more-link a,
  427. .dpl-page-speaking-events.link-style-no-underline .entry-content .speaking-events-grid .read-more-link a,
  428. .dpl-page-speaking-events .entry-content .event-grid-content .read-more-link a,
  429. .dpl-page-speaking-events .entry-content .speaking-events-grid .read-more-link a,
  430. .dpl-page-speaking-events .entry-content p .event-grid-content .read-more-link a,
  431. .dpl-page-speaking-events .entry-content p .speaking-events-grid .read-more-link a {
  432. /*    color: var(--global-palette1) !important;*/
  433.     text-decoration: none !important;
  434.     font-size: 0.95rem !important;
  435.     display: inline-block !important;
  436.     font-style: normal !important;
  437.     padding: 0 !important;
  438.     border-radius: 0 !important;
  439.     transition: all 0.3s ease !important;
  440.     background-color: transparent !important;
  441.     border: none !important;
  442.     text-decoration: underline !important;
  443. }
  444.  
  445. .dpl-page-speaking-events .read-more-link a:hover,
  446. .dpl-page-speaking-events .event-grid-content .read-more-link a:hover,
  447. .dpl-page-speaking-events .speaking-events-grid .read-more-link a:hover,
  448. .dpl-page-speaking-events.link-style-no-underline .entry-content .event-grid-content .read-more-link a:hover,
  449. .dpl-page-speaking-events.link-style-no-underline .entry-content .speaking-events-grid .read-more-link a:hover,
  450. .dpl-page-speaking-events .entry-content .event-grid-content .read-more-link a:hover,
  451. .dpl-page-speaking-events .entry-content .speaking-events-grid .read-more-link a:hover,
  452. .dpl-page-speaking-events .entry-content p .event-grid-content .read-more-link a:hover,
  453. .dpl-page-speaking-events .entry-content p .speaking-events-grid .read-more-link a:hover {
  454.     text-decoration: underline !important;
  455.     background-color: transparent !important;
  456.     color: var(--global-palette1) !important;
  457. }
  458.  
  459. /* Additional override for any possible theme conflicts */
  460. .dpl-page-speaking-events .read-more-link,
  461. .dpl-page-speaking-events  .event-grid-content .read-more-link,
  462. .dpl-page-speaking-events  .speaking-events-grid .read-more-link {
  463.     text-align: right !important;
  464.     margin-right: 0 !important;
  465.     margin-top: 1rem !important;
  466. }
  467.  
  468. .dpl-page-speaking-events  .read-more-link a,
  469. .dpl-page-speaking-events  .event-grid-content .read-more-link a,
  470. .dpl-page-speaking-events  .speaking-events-grid .read-more-link a,
  471. .dpl-page-speaking-events.link-style-no-underline .entry-content .event-grid-content .read-more-link a,
  472. .dpl-page-speaking-events.link-style-no-underline .entry-content .speaking-events-grid .read-more-link a {
  473. /*    color: var(--primary-color) !important;*/
  474.     color: var(--global-palette1) !important;
  475. /*    text-decoration: none !important;*/
  476.     font-style: normal !important;
  477.     font-size: 0.9rem !important;
  478.     padding: 0 !important;
  479.     border-radius: 0 !important;
  480.     background-color: transparent !important;
  481.     display: inline-block !important;
  482.     visibility: visible !important;
  483.     opacity: 1 !important;
  484. }
  485.  
  486. .dpl-page-speaking-events  .read-more-link a:hover,
  487. .dpl-page-speaking-events  .event-grid-content .read-more-link a:hover,
  488. .dpl-page-speaking-events  .speaking-events-grid .read-more-link a:hover,
  489. .dpl-page-speaking-events.link-style-no-underline .entry-content .event-grid-content .read-more-link a:hover,
  490. .dpl-page-speaking-events.link-style-no-underline .entry-content .speaking-events-grid .read-more-link a:hover {
  491.     text-decoration: underline !important;
  492.     background-color: transparent !important;
  493.     color: var(--global-palette9) !important;
  494. }
  495.  
  496. /* Ensure the read-more-link container is visible */
  497. .dpl-page-speaking-events .read-more-link,
  498. .dpl-page-speaking-events .event-grid-content .read-more-link,
  499. .dpl-page-speaking-events .speaking-events-grid .read-more-link {
  500.     text-align: right !important;
  501.     margin-right: 4rem !important;
  502.     margin-top: 1rem !important;
  503.     display: block !important;
  504.     visibility: visible !important;
  505.     opacity: 1 !important;
  506. }
  507.  
  508. .dpl-page-speaking-events .topic-divider {
  509.     margin: 1.5rem 0 !important;
  510.     border: none !important;
  511.     border-top: 1px solid #e0e0e0 !important;
  512.     width: 100% !important;
  513. }
  514.  
  515. /* Pagination */
  516. .speaking-events-pagination {
  517.     display: flex !important;
  518.     justify-content: center !important;
  519.     align-items: center !important;
  520.     margin: 2rem 0 !important;
  521.     flex-wrap: wrap !important;
  522.     gap: 0.5rem !important;
  523. }
  524.  
  525. .speaking-events-pagination .page-numbers,
  526. .link-style-no-underline .entry-content .speaking-events-pagination .page-numbers {
  527.     display: inline-block !important;
  528.     padding: 0.5rem 0.75rem !important;
  529.     margin: 0 0.25rem !important;
  530.     border: 1px solid #e0e0e0 !important;
  531.     border-radius: 4px !important;
  532.     text-decoration: none !important;
  533.     color: var(--global-palette1) !important;
  534.     cursor: pointer !important;
  535. }
  536.  
  537. .speaking-events-pagination .page-numbers.current,
  538. .link-style-no-underline .entry-content .speaking-events-pagination .page-numbers.current {
  539.     background-color: var(--global-palette1) !important;
  540.     color: white !important;
  541.     border-color: var(--global-palette1) !important;
  542. }
  543.  
  544. .speaking-events-pagination .page-numbers:hover,
  545. .link-style-no-underline .entry-content .speaking-events-pagination .page-numbers:hover {
  546.     background-color: #f5f5f5 !important;
  547.     text-decoration: none !important;
  548. }
  549.  
  550. /* Loading State */
  551. .speaking-events-loading {
  552.     text-align: center;
  553.     padding: 3rem 0;
  554. }
  555.  
  556. .spinner {
  557.     animation: rotate 2s linear infinite;
  558.     margin-bottom: 1rem;
  559. }
  560.  
  561. .spinner .path {
  562.     /*stroke: #567b2d;*/
  563.     stroke: var(--global-palette1);
  564.     stroke-linecap: round;
  565.     animation: dash 1.5s ease-in-out infinite;
  566. }
  567.  
  568. @keyframes rotate {
  569.     100% {
  570.         transform: rotate(360deg);
  571.     }
  572. }
  573.  
  574. @keyframes dash {
  575.     0% {
  576.         stroke-dasharray: 1, 150;
  577.         stroke-dashoffset: 0;
  578.     }
  579.     50% {
  580.         stroke-dasharray: 90, 150;
  581.         stroke-dashoffset: -35;
  582.     }
  583.     100% {
  584.         stroke-dasharray: 90, 150;
  585.         stroke-dashoffset: -124;
  586.     }
  587. }
  588.  
  589. /* Responsive adjustments */
  590. @media (max-width: 768px) {
  591.     .dpl-page-speaking-events .speaker-topic-wrapper {
  592.         flex-direction: column !important;
  593.         align-items: center !important;
  594.         text-align: center !important;
  595.     }
  596.  
  597.     .dpl-page-speaking-events .topic-details {
  598.         text-align: center !important;
  599.     }
  600.  
  601.     .dpl-page-speaking-events .speaker-image-container {
  602.         margin-bottom: 1.5rem !important;
  603.         text-align: center !important;
  604.     }
  605.  
  606.     .dpl-page-speaking-events .speaker-name {
  607.         text-align: center !important;
  608.     }
  609.  
  610.     .dpl-page-speaking-events .read-more-link {
  611.         text-align: right !important;
  612.         margin-right: 0 !important;
  613.     }
  614.  
  615.     .dpl-page-speaking-events .topic-title, .dpl-page-speaking-events .topic-description, .dpl-page-speaking-events .event-date-info {
  616.         text-align: center !important;
  617.     }
  618.  
  619.     .dpl-page-speaking-events .event-date-info {
  620.         justify-content: center !important;
  621.     }
  622.  
  623.     .dpl-page-speaking-events .topic-date-time {
  624.         justify-content: center !important;
  625.         display: flex !important;
  626.     }
  627. }
  628.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!